Mermaid：用代码画图
Mermaid是一个基于JavaScript的图表绘制工具，由Knut Sveidqvist于2014年创建。它的核心理念是"Diagrams as Code"——用简洁的文本语法描述图表结构，自动渲染为SVG图形。相比Visio、Draw.io等拖拽式工具，Mermaid的优势在于：图表定义可以纳入版本控制，清晰追踪变更历史；文本描述比图形操作更高效，尤其对开发者而言；与Markdown深度集成，GitHub、GitLab、Notion等平台原生支持；修改结构时不需要重新拖拽布局，只需编辑文本。
流程图（Flowchart）
流程图是Mermaid最常用的图表类型，语法以flowchart开头，支持四个方向：TD/TB（从上到下）、BT（从下到上）、LR（从左到右）、RL（从右到左）。
节点定义方式：A[矩形文本]表示矩形节点；A(圆角矩形)表示圆角节点；A{菱形文本}表示判断节点；A((圆形))表示圆形节点。连接线类型：--->表示实线箭头；---表示实线无箭头；-.->表示虚线箭头；==>表示粗线箭头；--文本-->表示带标签的连线。
子图（subgraph）可以将相关节点分组，形成逻辑区域。子图可以有自己的方向，支持嵌套。
时序图（Sequence Diagram）
时序图描述对象之间的交互顺序，是理解系统行为的有力工具。基本语法以sequenceDiagram开头。参与者用participant声明，消息用A->>B: 文本表示。箭头类型：->>实线箭头（同步调用）、-->>虚线箭头（返回）、-)开放箭头（异步消息）。激活框用activate/deactivate或+/-简写表示。分组结构：loop循环、alt/else条件分支、opt可选、par并行。
时序图的实用技巧：为关键消息添加备注（Note over A,B: 文本）；使用autonumber自动编号消息；设置actor与participant混合使用，让人物和系统角色区分更明显。
ER图（Entity-Relationship Diagram）
ER图用于描述数据模型和实体关系，语法以erDiagram开头。实体定义：CUSTOMER ||--o{ ORDER : "places"表示一个客户可以下零到多个订单。关系符号：||表示恰好一个，o{表示零到多个，|{表示一到多个，}o表示零到一。实体属性定义：CUSTOMER { string name int age string email }，支持string、int、float等类型标注。
ER图在数据库设计文档中特别有用，可以直观展示表之间的关联关系和基数约束。
其他实用图表
- 甘特图（Gantt）：项目管理时间线，支持任务依赖、里程碑、状态标记
- 饼图（Pie）：简单的比例展示，适合文档中的数据概览
- 类图（Class Diagram）：面向对象设计的UML类图，支持继承、组合、聚合关系
- 状态图（State Diagram）：描述对象状态转换，适合工作流和状态机建模
- 思维导图（Mindmap）：知识梳理和头脑风暴，树状结构展开
Mermaid最佳实践
保持图表简洁——一个图表不超过15-20个节点，过于复杂的图表应拆分为多个子图或多个独立图表。使用有意义的节点ID和标签——不要用a、b、c这样的ID，用userLogin、validateInput等描述性名称。利用样式类（classDef）统一视觉风格。在团队中建立Mermaid图表的编写规范，确保图表风格一致。
工具推荐
使用我们的在线Mermaid编辑器，左右双栏实时编辑预览，支持流程图、时序图、ER图等所有图表类型，内置语法模板和示例，帮助你快速创建专业图表。