name: visualizing-with-mermaid description: 使用语义样式和视觉层次创建专业的Mermaid图表。适用于创建流程图、序列图、状态机、类图或架构可视化。
Mermaid图表
默认：暗色模式颜色 来自 references/color-palettes.md。
选择图表类型
| 概念 | 图表类型 |
|---|---|
| 流程流、决策 | 流程图（自上而下方向） |
| API调用、消息传递 | 序列图 |
| 生命周期状态 | 状态图 |
| 数据模型、关系 | 类图或ERD |
| 系统架构 | 带有子图的流程图（从左到右方向） |
核心原则
- 视觉层次优先于装饰 - 颜色/大小引导视线关注重点
- 语义颜色 - 颜色具有含义（分组、状态、关键性）
- 简洁胜于完整 - 80%清晰比100%混乱更好
- 最大7-12个节点 - 人类工作记忆限制；将更大系统分解为可钻取部分
快速样式指南
做：
- 使用填充来分组相关组件
- 用线宽突出关键路径
- 不同形状 = 不同组件类型（圆柱体用于数据库，菱形用于决策）
- 保持标签为1-4个词；使用
<br/>处理更长标签
不做：
- 纯黑色（
#000000）- 太刺眼，使用深灰色 - 饱和的背景颜色 - 使眼睛疲劳
- 每个图表超过5种颜色
- 低对比度组合
形状语义
- 矩形：服务、流程
- 圆角矩形：API、接口
- 圆形：起点/终点、外部系统
- 菱形：决策点
- 圆柱体：数据库
- 六边形：队列、消息代理
布局
LR（从左到右）：管道、架构图 TB（自上而下）：层次结构、决策流
使用子图用于：部署边界、逻辑层、团队所有权、信任边界。
资源
- 颜色调色板：参见 references/color-palettes.md
- 模式示例：参见 references/examples.md 用于架构、状态机、数据流、ERD
工作流程
- 目的 - 这个图表应该支持什么决策/理解？
- 类型 - 根据显示内容选择
- 结构 - 识别组件、关系、分组
- 样式 - 应用语义颜色，突出关键路径
- 审查 - 有人能在10秒内理解它吗？