有数

Appearance

Deepseek + Mermaid 创作思维导图 ​

Mermaid 简介 ​

官方仓库：https://github.com/mermaid-js/mermaid

在线预览：https://mermaid.live

Mermaid 是一个开源的图表和图形绘制工具，允许用户通过简单的文本语法（类似 Markdown）来生成各种类型的图表，如流程图、序列图、甘特图、类图等。

使用 VS Code 插件实现 Mermaid 图表预览 ​

Visual Studio Code 配合Markdown Preview Mermaid Support 插件提供了对 Mermaid 代码块的支持，可以在 VS Code 中轻松预览图表。

安装 VS Code 插件 ​

  1. 打开 VS Code。
  2. 点击左侧活动栏的 扩展 图标。
  3. 在搜索框中输入 Markdown Preview Mermaid Support。
  4. 点击 安装（Install）按钮。

预览 Mermaid 图表 ​

  1. 在 VS Code 中，打开一个 Markdown 文件（.md 文件）。
  2. markdown 插入 Mermaid 代码块，也可以直接保存 .mmd 文件
mermaid
flowchart LR
    %% 中心 NodeA 节点
    NodeA["NodeA备注"]

    %% NodeA 组
    subgraph NodeA_Group [NodeA-Group]
        direction LR
        NodeA-A["NodeA-A备注"]
        NodeA-B["NodeA-B备注"]
    end

    %% NodeB 组
    subgraph NodeB_Group [NodeB-Group]
        direction LR
        NodeB-A["NodeB-A备注"]
        NodeB-B["NodeB-B备注"]
    end

    %% Direct Connect Gateway
    subgraph NodeC_Group [DX]
        direction LR
        DX["DX Gateway"]
    end

    %% 连接关系
    NodeA -- DX --> NodeC_Group
    NodeA -- NodeA --> NodeA_Group
    NodeA -- NodeB --> NodeB_Group

    %% 自定义样式
    classDef NodeAStyle fill:#E0F7FA,stroke:#00796B,stroke-width:2px,color:#004D40;
    classDef NodeBStyle fill:#FFF9C4,stroke:#FBC02D,stroke-width:2px,color:#F57F17;
    classDef NodeCStyle fill:#F3E5F5,stroke:#7B1FA2,stroke-width:2px,color:#4A148C;

    %% 应用样式
    class NodeA_Group NodeAStyle;
    class NodeB_Group NodeBStyle;
    class NodeC_Group NodeCStyle;
  1. 右键点击编辑器 “打开预览”，或者按 common+shift+v），可以看到 Mermaid 图表的实时渲染。

使用 Mermaid CLI 导出图片 ​

如果你需要将 Mermaid 图表导出为 图片（如 PNG、PDF），可以使用 Mermaid CLI 工具来实现。这种方法无需在 VS Code 中进行截图，而是直接通过命令行生成图片。

Mermaid CLI ​

  1. 安装 mermaid-cli：
    bash
    # 使用 npm 安装
npm install -g @mermaid-js/mermaid-cli
# 或 brew 安装
brew install mermaid-cli
  2. mermaid-cli 导出图片
    bash
    mmdc -i topo.mmd -o topo.png
mmdc -i topo.mmd -o topo.pdf
mmdc -i topo.mmd -o topo.svg