一、什么是 Mermaid
Mermaid 是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的文本语法来创建和修改图表。通过简单的文本描述，你就可以快速生成流程图、时序图、甘特图、类图、状态图、饼图等多种专业图表。
Mermaid 的优势：
- 📝 简单易学：使用文本描述图表，无需拖拽绘制
- 🚀 快速高效：几行代码即可生成复杂图表
- 🔄 易于维护：修改文本即可更新图表，便于版本控制
- 🎨 专业美观：自动布局，生成专业级图表
- 🌐 广泛支持：被 GitHub、GitLab、Notion 等平台原生支持
二、为什么在刀刻中使用 Mermaid
虽然 Mermaid 本身是通过代码生成图表，但刀刻绘图中插入 Mermaid 图形后，你可以像编辑普通图形一样，通过拖拽、调整大小、添加样式等可视化操作来编辑它，而不需要修改代码。
- 🎯 代码生成 + 可视化编辑：用代码快速生成基础结构，用拖拽精细调整细节
- 🔧 灵活调整：可以移动节点位置、调整图形大小、修改颜色样式
- ⚡ 提高效率：复杂图表用代码生成，简单调整用拖拽完成
三、在刀刻中插入 Mermaid 图形的 3 种方法
方法 1：通过 AI 智能生成 🤖
最简单快捷的方式！只需描述你的需求，AI 会自动生成 Mermaid 代码。
操作步骤：
- 点击侧边栏菜单
探索按钮 - 在输入框中
描述你想要的图形（例如："创建一个用户登录流程图"） - 点击
生成按钮，AI 会自动分析并生成 Mermaid 图形 - 生成后可直接插入到画布中使用
💡 提示：AI 生成功能需要登录账号才能使用
方法 2：绘图过程中直接插入 Mermaid 代码 ✏️
适合已经熟悉 Mermaid 语法的用户，可以在绘图过程中快速插入。
操作步骤：
- 在绘图界面中，点击顶部工具栏的
插入图形图标 - 在下拉菜单中选择
Mermaid，会弹出代码编辑器 - 在弹窗中输入或
粘贴 Mermaid 代码 - 点击
插入按钮，图形会自动生成并添加到画布中 - 插入后可以像普通图形一样移动、调整大小
方法 3：通过刀刻实验室预览后添加 🧪
刀刻实验室可以边写边看效果，支持实时预览和多种示例模板。
操作步骤：
- 打开 刀刻实验室 - Mermaid 预览器
- 在左侧输入框中
输入 Mermaid 代码，右侧会实时预览图形效果 - 可以点击顶部的示例按钮（flowchart、sequence、class 等）快速加载模板
- 预览满意后，点击
在绘图中打开按钮 - 系统会自动打开绘图工具并插入该 Mermaid 图形
实验室的优势：
- ✅ 实时预览，所见即所得
- ✅ 提供多种图表类型示例
- ✅ 支持导出 PNG 图片
- ✅ 无需登录即可使用
四、Mermaid 常用图表类型
刀刻支持所有 Mermaid 图表类型，包括但不限于：
- 流程图 (Flowchart)：展示流程和决策路径
- 时序图 (Sequence Diagram)：展示对象间的交互顺序
- 类图 (Class Diagram)：展示类的结构和关系
- 状态图 (State Diagram)：展示状态转换
- 甘特图 (Gantt Chart)：展示项目进度
- 饼图 (Pie Chart)：展示数据占比
- ER 图 (Entity Relationship)：展示数据库关系
- 用户旅程图 (User Journey)：展示用户体验流程
- Git 图 (Git Graph)：展示代码分支
五、常见问题
Q: Mermaid 图形可以编辑吗？ A: 可以！双击已插入的 Mermaid 图形即可重新编辑代码。
Q: 支持中文吗？ A: 完全支持中文，可以在节点文本中直接使用中文。
Q: 如何学习 Mermaid 语法？ A: 推荐访问 Mermaid 官方文档 或使用刀刻实验室的示例模板学习。
Q: 生成的图形可以导出吗？ A: 可以！在刀刻实验室中可以导出为 PNG 图片，在绘图工具中可以导出为多种格式。
Loading......