如何在draw.io中通过纯文本生成图表？

Question

**如何在draw.io中通过纯文本生成图表？** draw.io（现称diagrams.net）支持通过纯文本定义图表结构，主要借助其“文本”功能或集成Mermaid语法。用户可通过“文件 > 新建空白图表”后选择“高级”选项卡中的“从文本创建图表”，粘贴结构化文本并生成流程图、组织图等。此外，还可使用插件或外部工具将Markdown或DSL转换为draw.io兼容的JSON格式导入。此方法适合开发者快速构建复杂拓扑，提高效率并减少手动绘图工作量。

Answer 1

一、draw.io中纯文本生成图表的背景与意义

随着DevOps和自动化流程在IT行业的普及，图形化表达系统架构、数据流向、组织结构等信息变得越来越重要。然而，传统的拖拽式绘图方式效率较低，尤其对于熟悉代码开发的工程师而言，手动绘制显得繁琐。

draw.io（现称diagrams.net）作为一款广泛使用的在线图表工具，支持通过纯文本定义图表结构。这种能力使得开发者可以利用熟悉的语法（如Mermaid或自定义DSL），快速生成复杂拓扑图，提升工作效率。

二、使用内置“从文本创建图表”功能

draw.io提供了一个便捷的入口来直接通过文本构建图表：

1. 打开 diagrams.net 网站或桌面应用；
2. 选择“文件 > 新建空白图表”；
3. 点击右侧“高级”选项卡；
4. 找到“从文本创建图表”按钮并点击；
5. 粘贴如下格式的结构化文本：

A -> B
B -> C
C -> D
D -> E
    

该功能适用于简单的流程图、组织结构图等场景，适合快速原型设计。

三、集成Mermaid语法生成图表

Mermaid 是一种流行的文本图表描述语言，draw.io 支持其部分语法以生成更复杂的图形。例如：

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Proceed]
    B -->|No| D[End]
    ```

将上述代码粘贴至“从文本创建图表”窗口，即可生成一个带条件分支的流程图。这种方式特别适合有前端开发经验的用户，能够结合Markdown进行文档嵌入。

四、使用插件或外部工具转换DSL为JSON

对于需要高度定制化的图表，可以借助第三方工具或插件将DSL（领域特定语言）转换为 draw.io 可识别的 JSON 格式。常见方法包括：

• 使用 Python 脚本解析 DOT 语言并输出 JSON；
• 利用开源项目如 viz.js 将 Graphviz 格式转换为图像后导入；
• 通过浏览器扩展自动将 Markdown 图表块导出为 draw.io 兼容格式。

此方法适合大型系统架构图或 CI/CD 流水线图等需要程序化生成的场景。

五、示例：用Mermaid生成Kubernetes架构图

以下是一个使用 Mermaid 描述 Kubernetes 架构的例子：

```mermaid
graph LR
    Client --> API
    API --> ETCD
    API --> Controller
    Controller --> Scheduler
    Scheduler --> Worker
    Worker --> Pod
    Pod --> Container
    ```

将上述内容粘贴到 draw.io 的文本输入框中，即可生成一个清晰的 Kubernetes 组件交互图。