可视化

Mermaid 图表

当用户要用文本语法在 Markdown、文档或代码仓库中维护图示，或明确要求 Mermaid 时，使用此 Skill。该库擅长：流程图、泳道图、时序图、类图、状态图、实体关系图、用户旅程图、甘特图、饼图、象限图、需求图、Git 分支图、C4 架构图、思维导图、时间线、ZenUML、桑基图、XY 图、块图、数据包图、看板图、架构图、雷达图、事件建模图、矩形树图、韦恩图、鱼骨图、沃德利地图、Cynefin 图、树视图。不要用于自由拖拽编辑、精细 SVG 排版、高性能关系网络探索或数据仪表盘。

去使用

yvonneyx

使用44

Skill 文件

Skill

SKILL.md

name	mermaid-diagram
title	Mermaid 图表
description	当用户要用文本语法在 Markdown、文档或代码仓库中维护图示，或明确要求 Mermaid 时，使用此 Skill。该库擅长：流程图、泳道图、时序图、类图、状态图、实体关系图、用户旅程图、甘特图、饼图、象限图、需求图、Git 分支图、C4 架构图、思维导图、时间线、ZenUML、桑基图、XY 图、块图、数据包图、看板图、架构图、雷达图、事件建模图、矩形树图、韦恩图、鱼骨图、沃德利地图、Cynefin 图、树视图。不要用于自由拖拽编辑、精细 SVG 排版、高性能关系网络探索或数据仪表盘。

Mermaid 图表

在单个 HTML 文件中使用 Mermaid.js 渲染各类图表，支持流程图、时序图、甘特图、类图、ER 图、状态图等。

核心依赖 (CDN 内联 script)

加载后调用 mermaid.initialize() 初始化，然后将 mermaid 语法写入 <pre class="mermaid"> 标签即可自动渲染。

HTML 模板

html

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <title>Mermaid 图表</title>  <script src="https://cdn.jsdmirror.com/npm/mermaid@11/dist/mermaid.min.js"></script>  <style>    * { margin: 0; padding: 0; box-sizing: border-box; }    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f5f5; padding: 24px; }    .mermaid { background: #fff; border-radius: 8px; padding: 24px; max-width: 900px; margin: 0 auto; }  </style></head><body>  <pre class="mermaid">    flowchart TD      A[开始] --> B{判断}      B -- 是 --> C[处理]      B -- 否 --> D[结束]      C --> D  </pre>
  <script>    mermaid.initialize({ startOnLoad: true, theme: 'default' });  </script></body></html>

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <title>Mermaid 图表</title>  <script src="https://cdn.jsdmirror.com/npm/mermaid@11/dist/mermaid.min.js"></script>  <style>    * { margin: 0; padding: 0; box-sizing: border-box; }    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f5f5; padding: 24px; }    .mermaid { background: #fff; border-radius: 8px; padding: 24px; max-width: 900px; margin: 0 auto; }  </style></head><body>  <pre class="mermaid">    flowchart TD      A[开始] --> B{判断}      B -- 是 --> C[处理]      B -- 否 --> D[结束]      C --> D  </pre>
  <script>    mermaid.initialize({ startOnLoad: true, theme: 'default' });  </script></body></html>

图表类型语法速查

流程图 (flowchart)

flowchart TD  A[矩形节点] --> B(圆角节点)  B --> C{菱形判断}  C -- 是 --> D[结果1]  C -- 否 --> E[结果2]

flowchart TD  A[矩形节点] --> B(圆角节点)  B --> C{菱形判断}  C -- 是 --> D[结果1]  C -- 否 --> E[结果2]

方向：TD(上→下) / LR(左→右) / BT(下→上) / RL(右→左)

时序图 (sequenceDiagram)

sequenceDiagram  participant 用户  participant 服务器  用户->>服务器: 发送请求  服务器-->>用户: 返回响应

sequenceDiagram  participant 用户  participant 服务器  用户->>服务器: 发送请求  服务器-->>用户: 返回响应

甘特图 (gantt)

gantt  title 项目计划  dateFormat YYYY-MM-DD  section 阶段一    需求分析 :a1, 2024-01-01, 7d    设计方案 :a2, after a1, 5d  section 阶段二    开发实现 :b1, after a2, 14d

gantt  title 项目计划  dateFormat YYYY-MM-DD  section 阶段一    需求分析 :a1, 2024-01-01, 7d    设计方案 :a2, after a1, 5d  section 阶段二    开发实现 :b1, after a2, 14d

类图 (classDiagram)

classDiagram  class Animal {    +String name    +eat()    +sleep()  }  class Dog {    +bark()  }  Animal <|-- Dog

classDiagram  class Animal {    +String name    +eat()    +sleep()  }  class Dog {    +bark()  }  Animal <|-- Dog

ER 图 (erDiagram)

erDiagram  USER ||--o{ ORDER : "下单"  ORDER ||--|{ ITEM : "包含"  USER {    int id    string name  }

erDiagram  USER ||--o{ ORDER : "下单"  ORDER ||--|{ ITEM : "包含"  USER {    int id    string name  }

状态图 (stateDiagram-v2)

stateDiagram-v2  [*] --> 待处理  待处理 --> 处理中 : 开始  处理中 --> 已完成 : 成功  处理中 --> 失败 : 出错  已完成 --> [*]

stateDiagram-v2  [*] --> 待处理  待处理 --> 处理中 : 开始  处理中 --> 已完成 : 成功  处理中 --> 失败 : 出错  已完成 --> [*]

饼图 (pie)

思维导图 (mindmap)

主题配置

javascript

mermaid.initialize({  startOnLoad: true,  theme: 'default',   // 可选: default | neutral | dark | forest | base  themeVariables: {    primaryColor: '#4A90E2',    primaryTextColor: '#fff',    edgeLabelBackground: '#fff',  }});

mermaid.initialize({  startOnLoad: true,  theme: 'default',   // 可选: default | neutral | dark | forest | base  themeVariables: {    primaryColor: '#4A90E2',    primaryTextColor: '#fff',    edgeLabelBackground: '#fff',  }});

动态渲染（JS 生成图表内容）

当图表内容需要由数据动态生成时：

javascript

async function renderDynamic(definition) {  const { svg } = await mermaid.render('graph-id', definition);  document.getElementById('container').innerHTML = svg;}
renderDynamic(`  flowchart LR    A --> B --> C`);

async function renderDynamic(definition) {  const { svg } = await mermaid.render('graph-id', definition);  document.getElementById('container').innerHTML = svg;}
renderDynamic(`  flowchart LR    A --> B --> C`);

注意事项

mermaid.initialize() 必须在 DOM 之后调用：将 <script> 放在 </body> 前，或使用 DOMContentLoaded。
startOnLoad: true：自动扫描页面内所有 <pre class="mermaid"> 并渲染，无需手动调用。
缩进不影响渲染：<pre> 内的缩进空格会被 Mermaid 忽略。
多个图表：页面内可放多个 <pre class="mermaid"> 块，全部会被自动渲染。
动态渲染：若内容由 JS 生成，使用 mermaid.render(id, definition) 返回 SVG 字符串，手动插入 DOM。每次调用的 id 必须唯一。

Ln 1, Col 1MarkdownSpaces: 2

No errors