DeepSeek & Mermaid：如何将文本直接转化为精美图表？ -优雅草卓伊凡

DeepSeek & Mermaid：如何将文本直接转化为精美图表？ -优雅草卓伊凡

1. 什么是 Mermaid？

Mermaid 是一种基于 文本描述 生成图表的开源工具，支持：

• 流程图（Flowchart）
• 时序图（Sequence Diagram）
• 类图（Class Diagram）
• 甘特图（Gantt）
• 饼图（Pie Chart）
• 状态图（State Diagram）

它通过简单的代码语法（类似Markdown）自动渲染图表，无需手动拖拽设计。

2. DeepSeek 如何集成 Mermaid？

DeepSeek（深度求索）的 代码解释和渲染能力 天然支持 Mermaid，你只需：

1. 输入 Mermaid 代码（如下示例）。
2. DeepSeek 自动解析并生成图表（部分平台需开启渲染支持）。

3. 示例：Mermaid 代码 → 图表

（1）流程图（Flowchart）

flowchart TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作1]
    B -->|否| D[执行操作2]
    C --> E[结束]
    D --> E

效果：

（2）时序图（Sequence Diagram）

sequenceDiagram
    Alice->>Bob: 你好！
    Bob-->>Alice: 收到
    Bob->>Charlie: 转发消息
    Charlie-->>Bob: 已处理

效果：

（3）类图（Class Diagram）

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

效果：

4. 如何让 Mermaid 图表更美观？

（1）使用主题（Themes）

在代码开头指定主题：

%%{init: {'theme': 'forest'}}%%
pie
    title 市场份额
    "苹果" : 45
    "三星" : 30
    "华为" : 15
    "其他" : 10

支持的主题：

• default（默认）
• forest（绿色系）
• dark（暗黑模式）
• neutral（中性色）

（2）调整样式（CSS）

通过 %% 注释注入CSS：

%%{init: {'themeVariables': {'primaryColor': '#ff0000'}}}%%
graph LR
    A[红色节点] --> B[默认节点]

（3）使用工具增强

• Mermaid Live Editor（在线编辑）：https://mermaid.live
• VS Code插件：安装 Mermaid Preview 或 Markdown Preview Enhanced。
• 导出为图片/PDF：用浏览器截图或 mermaid-cli 命令行工具。

5. DeepSeek + Mermaid 的最佳实践

1. 在 DeepSeek 对话中直接写 Mermaid 代码，自动生成图表。
2. 复制代码到 Markdown 文件（如 .md），用支持 Mermaid 的编辑器（如 Typora）渲染。
3. 导出为 PPT/PDF：用 mermaid-cli 或截图插入文档。

6. 总结

Mermaid 让图表设计变得像写代码一样简单！ 🚀