【fixchart】【来学习基于Mermaid语法生成“流程图”】

fixchart是一种基于文本的图表生成工具，语法是Mermaid，支持流程图、时序图、甘特图等。其中 流程图（Flowchart） 是最常用的一种。

标题基本结构

流程图以 flowchart 开头（旧版本用 graph，现在推荐用 flowchart）：

flowchart TDA --> B

TD 表示 Top Down（从上到下）

其他方向：

• TB：Top to Bottom（同 TD）
• BT：Bottom to Top
• LR：Left to Right
• RL：Right to Left

标题节点（Node）定义

默认节点（矩形）

flowchart LRStart --> End

自动创建两个矩形节点：Start 和 End。

显式定义节点 ID 和文本

flowchart LRid1[开始] --> id2[结束]

id1 是节点 ID（必须唯一）
[开始] 是显示文本，方括号表示矩形

不同形状的节点

语法	形状	示例
A[文本]	矩形	（默认）
A(文本)	圆角矩形	A(开始)
A((文本))	圆形	A((中心))
A>文本]	菱形	（不对称） A>决策]
A{文本}	菱形	（对称，常用于判断） A{是否继续?}
A[/文本/]	梯形	A[/输入/]
A[\文本]	反向梯形	A[\输出]
A[[文本]]	子程序（双矩形）	A[[子程序]]
A[(数据库)]	圆柱体（数据库）	A[(用户数据)]

连接线（Link）

基本箭头

A --> B // 带箭头
A --- B // 无箭头直线
A ==> B // 加粗箭头

带文字的连接

flowchart LRA -->|"是"| BA -->|"否"| C

注意：文字用 文字 包裹，建议用引号避免特殊字符问题。

子图（Subgraph）

用于分组节点（类似“模块”）：

flowchart TDsubgraph 初始化A[加载配置]B[连接数据库]endsubgraph 处理C[读取数据]D[分析结果]endA --> B --> C --> Dsubgraph 标题end

样式与类（Styling）

单个节点样式

flowchart LRA[红色节点]:::specialB[普通节点]classDef special fill:#f9f,stroke:#333,stroke-width:2px;class A special

classDef 定义 CSS 样式类

多个节点应用同一类

flowchart LRA --> B --> Cclass A,C special;

注释

Mermaid 中用 %% 写注释：

flowchart LRA --> B --> Cclass A,C special;
%% 这是一个流程图%% 开始到结束

完整示例：用户登录流程

flowchart TDA([开始]) --> B{输入用户名密码?}B -->|是| C[验证凭证]B -->|否| D[[提示输入]]D --> BC -->|有效| E[进入主页]C -->|无效| F[显示错误]F --> BE --> G([结束])

注意事项

• 节点 ID 不能包含空格或特殊符号（建议用字母/数字/下划线）
• 文本中若含空格、冒号、引号等，建议用引号包裹：A[“用户: admin”]

在哪里使用？

https://fixchart.yun-api.com/