ASCIIFlow

关注
义项:ASCII字符图形绘制工具
ASCIIFlow

ASCIIFlow是一款基于浏览器的ASCII字符图形绘制工具,用户可以用线条、方框、箭头和文字等图形元素,在字符网格上直接绘制流程图、示意图和线框图,并将结果导出为纯文本或HTML,便于粘贴到代码注释、说明文档和邮件中[1][2]。该工具完全在客户端运行,核心功能不需要服务器参与,采用MIT许可证开源,由Lewis Hemens创建,是可嵌入纯文本环境中的轻量级制图方案[3][4]。

百科 图文
目录
  1. 定义
  2. 原理
  3. 发展历程
  4. 应用
  5. 局限
  6. 参见

定义

ASCIIFlow是一款在网页浏览器中运行的ASCII艺术绘图应用,用途是绘制由纯文本字符构成的图表[1]。用户在字符网格画布上使用方框、直线、箭头和文本等图形元素,画出的每一处线条和边框都由连字符、加号、竖线一类键盘字符拼成,输出结果可以直接复制粘贴到任何支持等宽字体的文本环境中[2]。

它面向的场景是需要在纯文本媒介中表达结构关系,例如代码注释、版本库说明文件、终端界面草图和技术邮件[5][6]。相比图片格式的图表,字符图表不依赖图像渲染,可以随文本一起被复制、检索和版本管理[7]。

原理

ASCIIFlow把画布处理成一张字符网格,每个格子容纳一个字符,屏幕坐标与格子坐标之间通过坐标转换函数互相映射[8]。用户拖动鼠标或触摸屏时,输入控制器把事件交给当前选中的绘图工具,工具按起止坐标把相应字符写入图层对象,画布再据此重新渲染[9]。所有坐标以字符行列为单位计量[10]。

程序结构采用类似flux的单向数据流模式,以一个中央状态仓库保存应用数据,绘图工具分为开始、移动、结束三个阶段执行,改动先写入临时草稿图层,动作完成后才提交到正式图层[9]。这种先草稿后提交的机制同时支撑了撤销与重做功能,撤销列表和重做列表分别记录每次提交前后的图层内容[8]。图表的持久化依托浏览器的本地存储接口完成,分享模式则把图表数据编码进网址中传递[8]。

早期版本用Google Web Toolkit编写并部署在Google App Engine上,对JavaScript的依赖较重,绘制大型图表时更适合使用Chrome浏览器[11]。2021年前后的重写版本改用TypeScript与React框架,代码以TypeScript为主,构建过程使用Bazel构建系统,由GitHub Actions负责自动化流程,站点托管在Cloudflare Pages上[12][3]。

发展历程

ASCIIFlow由Lewis Hemens开发,2011年已有介绍文章出现,被认为是一款简洁易用的纯文本流程图表制作工具[13]。作者最初的设想是提供一种把流程图或图形嵌入邮件、博客和文本媒介的简便方式,其后陆续加入了导出为DITAA格式、在线分享与保存等功能[11]。

2014年1月,作者在站点因访问量激增而中断服务时说明,正在彻底重写ASCIIFlow,放弃Google Web Toolkit,转而使用画布与JavaScript实现,同时保留原有的ASCII观感,新增调整图形尺寸的工具,把画布改为无限大小,并支持移动设备[4]。重写后的版本被称作ASCIIFlow Infinity,支持鼠标调整大小、添加文字、导入导出、撤销重做,并可保存到Google Drive[14]。

2021年2月,项目中出现标注为Asciiflow 2021的提交,标志着新版代码库的成型[1]。2024年2月,代码库继续合入核心更新[1]。该工具的源代码以MIT许可证开放[4]。

应用

ASCIIFlow的主要用途是为代码文档绘制架构图或流程图,结果可以直接插入代码注释和版本库的说明文件中[5]。它也可用于为终端应用或命令行程序制作纯文本界面的线框草图和布局设计[5]。部分机构会部署自有的实例,供内部团队使用而不依赖外部服务[5]。

在协作场景中,用户可以把绘制好的字符图表粘贴到聊天工具、代码评审评论或技术邮件里,不必附加图片文件[7]。社区还围绕它开发了扩展形态,例如把绘图能力封装成模型上下文协议服务,让AI助手根据需求文档或自然语言描述生成ASCII线框图[10];也有第三方为其开发了在笔记软件和代码编辑器中直接调用绘图的插件[15]。

局限

ASCIIFlow提供的绘图功能较为基础,缺少复杂的节点管理和深度定制能力,难以满足高级制图需求[6]。作为基于网页的工具,它需要网络连接才能使用,在离线环境下受到限制[6]。当图形规模较大或结构复杂时,可能出现响应变慢等性能问题,在配置较低的设备上尤为明显[6]。

字符图表本身不是结构化数据源,调整尺寸、比对差异和重构都较为困难,通常只适合一次性草稿,不适合需要长期维护的图表[7]。输出结果必须在等宽字体下才能保持对齐,发布前需要在目标环境如代码托管平台、终端或邮件客户端中确认显示效果[7]。此外,用中文字符制表存在对齐问题,因为中文字符在画布中按单个格子处理,导出为文本时实际占据两个标准字符位置,这两个位置并非严格等宽,与字体设计和渲染方式有关[8]。该工具也没有内置版本控制能力,难以追踪图形改动或回退到先前版本[6]。

参见

  • ASCII艺术 —— ASCIIFlow所绘制的图形即由ASCII字符拼合而成的图像。

  • 流程图 —— ASCIIFlow最典型的绘制对象。

  • 等宽字体 —— 字符图表能够对齐显示的前提条件。

  • Mermaid —— 同样以纯文本描述图表的工具,常用于文档与版本库。

  • Google Web Toolkit —— ASCIIFlow早期版本所采用的开发框架。

  • 模型上下文协议 —— 有开发者据此把ASCIIFlow的绘图能力封装给AI助手调用。

参考资料

  1. sthagen/lewish-asciiflow: ASCIIFlow · GitHub [引用日期2026-10-14]
  2. ASCIIFlow: ASCII Art Drawing Tool [引用日期2026-10-14]
  3. lewish/asciiflow | DeepWiki [引用日期2026-10-14]
  4. alternativeto.net 上的网页 [引用日期2026-10-14]
  5. Deploy ASCIIFlow [引用日期2026-10-14]
  6. Diagrams VS asciiflow [引用日期2026-10-14]
  7. AsciiFlow [引用日期2026-10-14]
  8. ASCIIFlow 字画示意图 源代码解析 [引用日期2026-10-14]
  9. Architecture | lewish/asciiflow | DeepWiki [引用日期2026-10-14]
  10. ASCIIFlow MCP服务器 - AI助手ASCII线框图生成工具-MCP服务 [引用日期2026-10-14]
  11. ASCiiFLOW [引用日期2026-10-14]
  12. zkrew-red/asciiflow: ASCIIFlow · GitHub [引用日期2026-10-14]
  13. 没想到 7 年前介绍的网站现在还在,而且更现代精致,还那么专注简洁 [引用日期2026-10-14]
  14. topic [引用日期2026-10-14]
  15. obsidian.md 上的网页 [引用日期2026-10-14]
词条评价
词条统计

浏览次数:2 次

阅读量:0 次 · 阅读完成量:0 次

最近更新:2026-10-13T18:31:52Z

历史版本

本条目引用的词条
ASCII艺术 Google Web Toolkit DITAA 流程图 等宽字体 Mermaid 模型上下文协议