Mermaid魔法图鉴 ✨

🌊 图表可视化神器 在这里你将掌握：

• 用代码画图的黑科技 🖌️
• 流程图六脉神剑 ➡️
• 序列图对话可视化 💬
• 甘特图时间管理术 ⏳
• 让文档会说话的秘籍 📖

快速入门

安装咒语

CDN速成

<!-- 在HTML中加入魔法药水 -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>

npm召唤

npm install mermaid --save

现代咒语

// 初始化魔法阵
mermaid.initialize({ startOnLoad: true });

第一道符咒

%% 你的第一个流程图
graph TD
    A[开始] --> B{判断}
    B -->|是| C[执行操作]
    B -->|否| D[结束]

<!-- 在页面放置魔法画布 -->
<div class="mermaid">
  graph TD
    A[开始] --> B{判断}
    B -->|是| C[执行操作]
    B -->|否| D[结束]
</div>

核心图表大全

流程图（Flowchart）

🌀 让代码变身设计大师

graph LR
    Start --> Input[输入需求]
    Input --> Process{分析}
    Process -->|可行| Implement[实现]
    Process -->|不可行| Redesign[重新设计]

序列图（Sequence）

🎭 对话可视化神器

sequenceDiagram
    小白->>大佬: 这个怎么实现？
    大佬-->>小白: 看文档！
    loop 每日一问
        小白->>大佬: 还是不会
        大佬-->>小白: Ctrl+C/V
    end

甘特图（Gantt）

gantt
    title 项目进度
    dateFormat  YYYY-MM-DD
    section 第一阶段
    需求分析   :a1, 2024-03-01, 7d
    原型设计   :after a1, 5d
    section 第二阶段
    开发       :2024-03-15, 14d
    测试       :5d

高阶魔法

主题换装术

// 在初始化时施展换装魔法
mermaid.initialize({
  theme: 'forest', // 可选：default|forest|dark|neutral
  flowchart: { 
    curve: 'basis' // 让连线更丝滑
  }
});

动态生成术

// 用咒语实时召唤图表
const renderDiagram = async (code) => {
  const { svg } = await mermaid.render('mermaid', code);
  document.getElementById('diagram').innerHTML = svg;
};

常见翻车现场

🚑 急救指南

1. 图表不显示：检查是否初始化 & 包含mermaid类
2. 语法报错：用mermaid在线编辑器调试
3. 布局混乱：尝试添加direction TB/LR指定方向
4. 特殊字符：用双引号包裹含空格的内容：A["Hello World"]

咒语速查表

图表类型	起手式	必杀技
流程图	graph TD/LR	形状：[]圆角 {}菱形
序列图	sequenceDiagram	loop循环 alt分支
类图	classDiagram	+公有 -私有
状态图	stateDiagram-v2	[*]开始/结束状态
饼图	pie	title 标题

资源宝库

🌟 修仙必备

• 官方文档 - 九阴真经
• 在线编辑器 - 练功房
• Mermaid学院 - 门派秘籍

🚨 渡劫须知

1. 保持代码缩进整洁（走火入魔警告）
2. 复杂图表分模块编写（防神识混乱）
3. 及时更新版本（防功法失效）
4. 多用注释说明（防记忆消散）

%% 毕业考试题
graph TB
    看完本文 --> 是否心动{❤️}
    是否心动 -->|是| 立刻实践[马上写个图表]
    是否心动 -->|否| 再看一遍[可能漏看了彩蛋]