← 返回项目
PROJECT · 11

MERMAID / EDITOR

用几行文字语法生成流程图,快速表达依赖、评审路径和系统结构。

状态
Working prototype
角色
工具设计、信息架构、前端工程
周期
2 天
年份
2026
03节点形状
02布局方向
0服务端请求
CASE STUDY
ToolingDiagramSVG

它解决什么

流程图往往在会议前才开始画,结果结构还没想清楚,工具就先变成了负担。这个 Demo 让图表从文字开始,修改路径和节点时不需要拖拽画布。

里面可以做什么

  • 使用 graph TDgraph LR 定义方向。
  • 使用方框、圆形和菱形节点表达不同语义。
  • 实时渲染 Pipeline、Review 和 API Flow 示例。

技术取舍

文本到图表的体验参考 Mermaid Live Editor,当前版本提供一个轻量本地解析器和 SVG 输出,适合展示核心交互而不是复制完整编辑器。

结果

它把“画图”变成了可以版本化、可以复制、也可以快速修改的文字资产。

SANDBOXED EXPERIENCE

可交互 Demo

Demo 在隔离的沙箱中运行。