生成流程图技能

叙述性文字看久了大脑会偷懒。流程图是最便宜的视觉总结:1 张胜过 1000 字。Flowix 与 Markdown 渲染层打通,Agent 直接产 Mermaid 代码块,实时显示成图。

前提 -- 写过最小结构 prompt,见提示词。

1. 三种图语法

语法	强项	弱项	典型用途
Mermaid	流程图 / 时序图 / 类图 / 甘特图	复杂排版	90% 的内部文档场景
PlantUML	时序图、组件图、状态机	需要服务端渲染	技术方案 / 架构图
DOT (Graphviz)	有向图、树	外观偏学术	依赖关系、目录树

默认选 Mermaid。Flowix 编辑器原生支持,Mermaid 代码块直接渲染,无需插件。

2. 一个立刻可用的 prompt

把下面保存为 Prompts/flowchart.md:

# Prompt: 根据正文生成流程图

## 输入
一段说明文字:

"""

"""

## 输出
**只输出** 一个 Mermaid 代码块,不要任何前后解释。如果文字不构成流程,**改写为 3-5 步的步骤图**(`graph TD`),不画饼图/折线图。

要求:
- 节点 ≤ 8 个,过多就合并
- 关键判断节点要标菱形 `{}`
- 边的文字 ≤ 6 字,放在 `-->|label|` 中
- 没有 "是 / 否" 这种二元边时不要画菱形
- 用 `flowchart LR`(从左到右)而不是 TD,除非明显是时间顺序

用法:把光标放在需要配图的那段文字后面,Cmd/Ctrl + L -> 选 Agent -> 输入 "为上一段配流程图",Agent 读完上下文,直接写一个 Mermaid 代码块,Flowix 自动渲染。

3. 三种典型 Mermaid 图示

流程图(横向决策树)

flowchart LR
  A[用户提交表单] --> B{校验通过?}
  B -- 是 --> C[写入数据库]
  B -- 否 --> D[返回错误]
  C --> E[返回 200]

Flowix 会自动渲染这一段代码块。

时序图

\`\`\`mermaid
sequenceDiagram
  participant U as 用户
  participant F as Flowix
  participant C as Claude
  U->>F: Cmd+L 唤起
  F->>F: 读取当前文档
  F->>C: 注入上下文
  C-->>F: 流式输出
  F->>U: 回写到光标
\`\`\`

甘特图(项目排期)

gantt
  title Flowix 0.10 排期
  dateFormat  YYYY-MM-DD
  section R&D
  笔记多端同步       :a1, 2026-07-12, 10d
  技能市场           :a2, after a1, 12d
  section 产品
  UI 改版             :b1, 2026-07-20, 8d

4. 复盘迭代

第一稿多半信息不全或顺序不对,典型 follow-up:

现状	follow-up
节点太挤	"合并 A 和 B 为一个节点"
想表达并行	"把 X、Y 拆成并行分支,用 subgraph 框"
错误顺序	"C 应该在 D 之前发生,调整"
太复杂	"整张图换一种结构:左是输入、中是处理、右是输出"

每次 follow-up 后,Flowix 重写代码块,可视化即时刷新。

5. 跨文档引用

对大项目,把所有流程图集中放进 Diagrams/ 目录:

Notes/
  Diagrams/
    用户登录时序.md
    订单状态机.md
    部署流程.md

每篇就是一张图 + 简短说明。在其他文档用 [[用户登录时序]] 双链引用,Flowix 会自动渲染成图。

6. 经验法则

图的目的是减少文字,不是炫技 -- 节点越少越好
决策节点(菱形)不要 > 3 个,多了就改写成多张子图
边的标签用动词 + 对象:"提交 -> 审核" 而不是 "操作"
配色用默认 -- 主题一致性比色彩丰富更重要

生成 流程图 技能