Mermaid 支持

Diagrammix3 支持使用 Mermaid 语法导入和导出图表，Mermaid 是一种流行的基于文本的绘图语言。

什么是 Mermaid？

Mermaid 是一个基于 JavaScript 的绘图工具，使用类似 Markdown 的语法来定义图表。它常用于文档、wiki 和 README 文件中。

Mermaid 语法示例：

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

导入 Mermaid 图表

注意： Mermaid 导入和导出是 PRO 功能。

插入 Mermaid（带预览和验证）

将 Mermaid 引入画布最快的方式是插入 Mermaid面板，它会在放置任何内容之前预览并验证图表。

1. 前往编辑 → 插入 Mermaid
2. 将您的 Mermaid 语法粘贴或输入到编辑器中
3. 在您输入的同时，Diagrammix 会验证语法，状态条会显示问题所在，或显示有效 · N 个节点，M 个连接器。您也可以随时点击验证
4. 点击应用以放置图表，或点击取消放弃。应用只会放置有效的图表

从剪贴板粘贴 Mermaid 内容时会经过同样的验证流程，因此格式错误的语法绝不会生成损坏的图表。

注意： Mermaid 是通过在"插入 Mermaid"面板中粘贴或输入来导入的——没有单独的"导入文件"命令。若要引入 .mmd 文件，请在任意文本编辑器中打开它并粘贴其内容。

支持的图表类型

Diagrammix 支持广泛的 Mermaid 图表类型，包括：

其他 Mermaid 类型（时间线、用户旅程图、象限图、XY 图表、桑基图、Git 图等）也能被识别并导入，但会渲染为通用的节点与连接器图，而不是专门的布局。应用之前请使用验证检查节点和连接器数量。

状态图语法

状态图用于建模一个对象可能处于的状态以及状态之间的转换。

基本状态图：

stateDiagram-v2
    [*] --> Active
    Active --> Inactive : deactivate
    Inactive --> Active : activate
    Active --> [*] : terminate

状态与转换：

• [*] 表示开始和结束状态
• --> 创建一个转换箭头
• : label 添加转换标签
• 嵌套状态使用缩进表示

复合状态：

stateDiagram-v2
    state Processing {
        [*] --> Validating
        Validating --> Executing
        Executing --> [*]
    }

**结果：**一张带有正确状态形状和已标注转换的状态机图。

导入示例

流程图

Mermaid 输入：

flowchart TD
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

**结果：**一张自上而下的流程图，包含矩形、圆角矩形和菱形，并通过带标签的箭头连接。

序列图

Mermaid 输入：

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob!
    B-->>A: Hi Alice!

**结果：**一张带有两个参与者和消息箭头的序列图。

类图

Mermaid 输入：

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()

**结果：**一张带有继承关系的 UML 类图。

导出为 Mermaid

复制 Mermaid

Diagrammix 通过剪贴板导出为 Mermaid——没有单独的"导出到文件"命令。

1. 选择您想要导出的形状，或不选中任何内容以导出整个画布
2. 前往编辑 → 复制 Mermaid
3. 将 Mermaid 语法粘贴到您需要的任何地方（如果需要，也可以将其保存为 .mmd 文件）

导出内容会根据所选范围自动适配：思维导图会以 mindmap 语法复制，UML 类图或序列图页面会以 classDiagram / sequenceDiagram 复制；其他任何内容都会导出为 flowchart。

继续以 Mermaid 编辑（往返转换）

导入的 Mermaid 图表会保留其源代码，因此您可以继续以 Mermaid 记法工作，而不必逐个编辑形状。

1. 选中一张已导入的 Mermaid 图表
2. 点击图表上的 </>（编辑 Mermaid 源代码）按钮
3. 会打开编辑 Mermaid 源代码面板，其中预填了原始的 Mermaid 文本
4. 编辑文本并点击重新渲染以就地更新图表

如果您在导入之后又在画布上更改了该图表，面板会在不会被保留的画布编辑下列出这些更改，方便您在重新渲染前做出决定。

作为原生对象编辑

您也可以将导入的图表直接作为原生 Diagrammix 对象来编辑：

• 移动和调整大小，自由处理形状
• 更改样式，使用检查器（颜色、字体、线条样式）
• 添加新元素，使用 Diagrammix 工具
• 修改连接关系，通过拖动端点
• 应用自动布局来重新整理图表

提示： 提前决定您想如何维护一张图表。使用 </> 源代码编辑器可以保持以 Mermaid 驱动，或者直接编辑形状进行一次性的视觉打磨。大量手动编辑可能会与重新渲染源代码所产生的结果不一致。

局限性

• 复杂样式：Mermaid 的样式指令可能无法完全转换
• 子图：会被转换为分组的形状
• 高级功能：部分 Mermaid 特有的功能（例如点击处理器）会被忽略
• 往返转换：导出一张您已大量手动编辑过的图表，可能无法生成完全相同的 Mermaid 语法——如需往返转换，请优先使用 </> 源代码编辑器

使用技巧

1. 导入后清理：使用自动布局整理导入的图表
2. 检查关系：确认导入的关系类型是否正确
3. 保持样式一致：应用 Diagrammix 样式以获得更精致的外观
4. 保留源代码：保存您原始的 Mermaid 文件以便版本控制