# 美人鱼专家 Mermaid.js 的专家指南，这是一个功能强大的 JavaScript 库，用于使用基于文本的语法创建图表和可视化。 Mermaid 将简单的文本描述转换为具有专业外观的图表，可以嵌入到文档、演示文稿和 Web 应用程序中。 ## 其他资源有关全面的文档和高级功能，请参阅 [Mermaid 源文档]()，其中包括： * [流程图指南]() \- 完整的流程图语法和示例有关集成详细信息和配置选项，请参阅 [docs/snapshot/v11.12.1/]() 中的主要文档。 ## 核心概念 **Mermaid 是一款文本转图表工具，可让您创建：** * 流程和决策树的流程图 * 交互和时间线的序列图 * 软件架构的类图 * 有限状态机的状态图 * 项目管理甘特图 * 用于版本控制可视化的 Git 图表 * 系统布局框图 ### 入门 **基本 Mermaid 语法结构：** 图类型【图内容】 **简单流程图示例：** 流程图TD A[开始] --> B{决定} B -->|是| C[过程1] B -->|否| D[过程2] C --> E[结束] D-->E ### 安装和设置 **在 HTML 中：** **在 Markdown/文档中：** 大多数现代平台（GitHub、GitLab、Notion）使用带有“mermaid”语言标识符的代码块本地支持 Mermaid。 **Node.js/npm：** npm 安装美人鱼 ### 命令行界面 **仅适用于流程图：mmdr (mermaid-rs-renderer)** [mmdr]() 是一个快速的原生 Rust 渲染器，仅用于**流程图**。它比 mermaid-cli 快约 1000 倍，并且不需要浏览器或 Node.js。 **检查是否安装：** mmdr——版本如果没有找到，请从以下位置安装： **用法（仅限流程图）：** # 管道到标准输出 echo '流程图LR； A-->B-->C'| mmdr-e svg # 文件到文件 mmdr -i 图.mmd -o 输出.svg -e svg **对于所有其他图表类型：mermaid-cli** **检查是否安装：** mmdc——版本如果找不到，请从以下位置安装： # 转换为 SVG mmdc -i 输入.mmd -o 输出.svg # 转换为深色主题的 PNG mmdc -i 输入.mmd -o 输出.png -t 深色 -b 透明 # 处理markdown文件 mmdc -i 自述文件.template.md -o 自述文件.md ## 流程图 ### 基本流程图流程图LR A[开始] --> B[进程] B --> C{决定} C -->|是| D[行动1] C -->|否| E[行动2] D --> F[结束] E-->F ### 流程图语法 * `流程图 TD` \- 自上而下的方向 * `流程图 LR` \- 从左到右方向 * `A[Text]` \- 矩形节点 * `A{Text}` \- 菱形决策节点 * `A((Text))` \- 圆形节点 * `A>Text]` \- 体育场形状 * `A --> B` \- 箭头连接 * `A -->|标签| B` \- 标记箭头 ## 序列图 ### 基本序列图序列图参与者爱丽丝参与者鲍勃爱丽丝->>鲍勃：你好鲍勃，你好吗？鲍勃-->>爱丽丝：我很好，谢谢！爱丽丝->>鲍勃：再见！ ### 序列图语法 * `参与者名称` \- 定义参与者 * `A->>B: Message` \- 同步消息 * `A-->B: Message` \- 异步消息（虚线） * `A-->>B: 消息` \- 返回消息 * `rect rgb(...)` \- 分组消息 * `loop / alt / opt` \- 控制结构 ## 类图 ### 基本类图类图动物类{ +字符串名称 +吃() } 鸭类{ +嘎嘎() } 动物<|-- 鸭子 ### 类图语法 * `class ClassName{ ... }` \- 定义类 * `+类型名称` \- 公共成员 * `-类型名称` \- 私有成员 * `methodName()` \- 方法 * `Child <|-- Parent` \- 继承 * `A *-- B` \- 组成 * `A o-- B` \- 聚合 ## 状态图 ### 基本状态图状态图-v2 [*] --> 空闲空闲 --> 处理处理中 --> 成功处理 --> 失败成功 --> [*] 失败 --> [*] ### 状态图语法 * `[*]` \- 开始/结束状态 * `A --> B` \- 转换 * `A: event` \- 触发转换 * `状态 A { ... }` \- 复合状态 * `[*] --> A` \- 初始状态 ## 甘特图 ### 基本甘特图甘特图标题项目时间表日期格式 YYYY-MM-DD 第 1 阶段部分设计：a1, 2024-01-01, 7d 第 2 阶段部分发展：a2，a1之后，14天测试：a3，a2之后，7d ### 甘特图语法 * `标题文本` \- 图表标题 * `dateFormat YYYY-MM-DD` \- 日期格式 * `节名称` \- 节标题 * `任务：id，开始，持续时间` \- 定义任务 * `after taskId` \- 依赖关系 ## Git 图表 ### 基本 Git 图表 gitGraph 提交提交分支发展结帐开发提交提交结账主要合并发展提交 ### Git 图形语法 * `commit` \- 创建提交 * `分支名称` \- 创建分支 * `结帐名称` \- 切换分支 * `合并名称` \- 合并分支 * `cherry-pick id` \- Cherry-pick 提交 ## 框图 ### 基本框图区块贝塔第 1 栏块：db：1 数据库[(数据库)] 结束块：应用程序：2 服务[服务] 应用程序接口[API] 结束数据库——API ### 框图语法 * `block:name:width` \- 定义块 * `node[(Text)]` \- 圆角节点 * `node[Text]` \- 方形节点 * `A -- B` \- 连接 * `columns N` \- 列布局 ## 集成和使用 ### 在 Markdown 中大多数平台原生支持 Mermaid： ````美人鱼流程图LR 甲-->乙 ```` ### 在 HTML 中

流程图LR 甲-->乙

### 在 JavaScript 中从“美人鱼”导入美人鱼；美人鱼.initialize({ startOnLoad: true }); // 以编程方式渲染 const 图 =等待 mermaid.render('diagram-id', '流程图 LR\nA-->B'); ## 最佳实践 1. **保持图表简单** \- 复杂的图表难以阅读 2. **使用一致的样式** \- 相似元素使用相同的形状 3. **为连接添加标签** \- 澄清关系 4. **分解复杂的图表** \- 分成多个更简单的图表 5. **测试渲染** \- 不同的工具可能渲染不同 ## 故障排除 **常见问题：** * **语法错误**：检查是否缺少分号或不正确的语法 * **渲染问题**：确保正确的美人鱼版本 * **平台支持**：并非所有平台都支持所有图表类型 * **性能**：大图表可能渲染缓慢 **调试提示：** * 从简单的图表开始 * 使用官方语法验证器 * 多平台测试 * 检查美人鱼版本兼容性 > 请参阅 [references/ADVANCED.md]() 了解高级功能，包括样式、主题和复杂的图表模式。

美人鱼专家

包含技能