mermaid-diagrams

用途

Mermaid Diagrams 用于通过 Mermaid 语法创建图表和可视化。它适合在文档、说明、设计讨论中快速生成结构化图形，例如流程图、时序图、类图、实体关系图、甘特图等。

主要能力

该技能覆盖多种图表类型，并提供对应的语法参考：

流程图（Flowchart）：支持 TD、LR、RL、BT 方向，以及矩形、圆角矩形、菱形、子程序、数据库、圆形、旗形等节点形状，支持箭头、无箭头连线、虚线箭头、粗箭头、带标签箭头等连接方式，并支持 subgraph 子图。
时序图（Sequence Diagram）：支持 participant 定义、实线/虚线/开放箭头消息、activate/deactivate 激活框、Note 注释、alt/else 条件分支、loop 循环、opt 可选动作。
类图（Class Diagram）：支持类定义、公有/私有/受保护/包级字段与方法，以及继承、组合、聚合、关联、依赖、实现等关系。
实体关系图（ER Diagram）：支持实体定义、主键 PK、唯一键 UK、外键 FK，以及一对一、一对零或多、一对一等或多、零或多对零或多等基数关系。
甘特图（Gantt Chart）：支持 title、dateFormat、section 分组、任务依赖（after）、里程碑（milestone）。
状态图（State Diagram）：使用 stateDiagram-v2 语法，支持状态转移与标签。
饼图（Pie Chart）：支持标题与数据项。
Git 图（Git Graph）：支持 commit、branch、checkout、merge 等操作。
用户旅程图（User Journey）：支持标题、section、任务与评分。
思维导图（Mindmap）：支持层级结构。
样式（Styling）：支持 classDef 定义样式类，并通过 ::: 应用到节点。

使用方式

Mermaid 图表写在 Markdown 代码块中，语言标识为 mermaid。例如：

flowchart TD
    A[Start] --> B{Is it valid?}
    B -->|Yes| C[Process data]
    B -->|No| D[Show error]

在 React 中可通过 mermaid 包集成，示例代码：

import mermaid from 'mermaid';
import { useEffect, useRef } from 'react';

mermaid.initialize({
  startOnLoad: true,
  theme: 'neutral', // default, dark, forest, neutral
  securityLevel: 'loose',
});

interface MermaidProps {
  chart: string;
  id?: string;
}

export function Mermaid({ chart, id = 'mermaid-diagram' }: MermaidProps) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) {
      mermaid.render(id, chart).then(({ svg }) => {
        if (ref.current) {
          ref.current.innerHTML = svg;
        }
      });
    }
  }, [chart, id]);

  return <div ref={ref} className="mermaid-container" />;
}

使用示例：

<Mermaid
  chart={`
    flowchart LR
      A --> B --> C
  `}
/>

适用场景

在 Markdown 文档中嵌入图表，GitHub Markdown 原生支持 Mermaid。
在 React 应用中渲染 Mermaid 图表。
需要快速绘制流程图、时序图、类图、ER 图、甘特图、状态图、饼图、Git 图、用户旅程图、思维导图等场景。

限制与提示

方向：使用 TD（自上而下）、LR（从左到右）、BT（自下而上）、RL（从右到左）。
注释：使用 %% 表示注释。
引号：标签含特殊字符时使用引号，例如 A["Label with (parentheses)"]。
换行：使用 <br/> 实现多行标签。
官方文档：https://mermaid.js.org/
在线编辑器：https://mermaid.live
GitHub 支持：Mermaid 在 GitHub Markdown 中原生可用。

关于收费、价格、平台支持范围等更多信息，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制与提示