DeepSeek & Mermaid:如何将文本直接转化为精美图表? -优雅草卓伊凡 1. 什么是 Mermaid?Mermaid 是一种基于 文本描述 生成图表的开源工具,支持: - 流程图(Flowchart)
- 时序图(Sequence Diagram)
- 类图(Class Diagram)
- 甘特图(Gantt)
- 饼图(Pie Chart)
- 状态图(State Diagram)
它通过简单的代码语法(类似Markdown)自动渲染图表,无需手动拖拽设计。 2. DeepSeek 如何集成 Mermaid?DeepSeek(深度求索)的 代码解释和渲染能力 天然支持 Mermaid,你只需: - 输入 Mermaid 代码(如下示例)。
- 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 的最佳实践- 在 DeepSeek 对话中直接写 Mermaid 代码,自动生成图表。
- 复制代码到 Markdown 文件(如 .md),用支持 Mermaid 的编辑器(如 Typora)渲染。
- 导出为 PPT/PDF:用 mermaid-cli 或截图插入文档。
6. 总结步骤 操作
1. 编写 Mermaid 代码 使用流程图、时序图等语法
2. 选择主题/样式 通过 init 配置颜色和布局
3. 渲染图表 在 DeepSeek/Markdown/在线编辑器中查看效果
4. 导出分享 截图或使用命令行工具转换
Mermaid 让图表设计变得像写代码一样简单! 🚀
|