TXT转PNG

TXT转PNG

一、总览对比

维度 Mermaid draw.io yEd
使用方式 在线 / VS Code / draw.io 内嵌 在线 / 桌面软件 在线 / 桌面软件
推荐方式 在线使用（可导出高清图） 桌面软件（体验无差异，离线更稳定） 桌面软件（体验无差异，离线更稳定）
输入文件 .mmd 纯文本，简单到可手写 .drawio，复杂不可手写 .graphml，复杂不可手写
输入文件来源 手写 / AI 生成 Mermaid 导入后拖拽调整 / AI 直接生成 只能通过 AI 从 Mermaid 转换
图片导出 在线版可导出高清 PNG/SVG 桌面版可导出高清 PNG/SVG/PDF 桌面版可导出高清 PNG/SVG/PDF
编辑方式 改源码 → 重新渲染 拖拽编辑，所见即所得 拖拽编辑 + 一键自动布局
适合场景 快速草图、文档插图 正式报告、精细排版 复杂架构图、大型关系图

二、Mermaid

2.1 下载安装

方式一：在线使用（推荐，可导出高清图）

无需安装，浏览器打开即可：

  • 官方在线编辑器：https://mermaid.live
  • 粘贴 .mmd 代码 → 实时渲染 → 导出 PNG/SVG（可调分辨率，最高 4K）

方式二：VS Code 插件（无法导出高清图）

  1. 打开 VS Code → 扩展商店
  2. 搜索 Markdown Preview Mermaid Support
  3. 安装后在 .md 文件中写 mermaid 代码块，预览窗口可看，但导出图片分辨率受限于预览窗口大小

方式三：draw.io 内嵌（可转 draw.io 格式）

draw.io 桌面版自带 Mermaid 支持：

  1. 菜单 Arrange → Insert → Advanced → Mermaid
  2. 粘贴 .mmd 代码 → 自动渲染 → 可继续拖拽编辑
  3. 默认只有黑白，需要在右侧面板手动加颜色

2.2 输入文件

.mmd 文件，声明式纯文本，简单到可以手写：

1
2
3
4
5
graph TD
    A[传感器] -->|FB1, FB2| B[保护系统]
    A -->|FB1, FB2| C[人机界面]
    B -->|CA1| D[安全注入]
    D -->|CA2| E[冷却剂系统]

上述mermaid代码的效果如下图所示：

核心语法只需记住：

  • graph TD（上到下）/ graph LR（左到右）
  • A --> B（箭头）/ A -->|标签| B（带标签箭头）
  • A[方框] / A(圆角) / A{菱形}
  • subgraph 子图名 ... end（分组）

2.3 优缺点

优点 缺点
语法极简，几分钟上手 布局不可控，复杂图容易走形
修改成本低，改文字即生效 样式定制有限，做不出精细排版
在线版导出高清图方便 VS Code 插件无法导出高清图

三、draw.io

3.1 下载安装

方式一：桌面软件（推荐）

  1. 官网下载：https://www.drawio.com → 选对应系统版本
  2. Windows：下载 .exe 安装包，一路下一步即可
  3. 安装后离线可用，无需登录注册
  4. 双击 .drawio 文件直接打开编辑

方式二：在线使用

  1. 打开 https://app.diagrams.net
  2. 功能与桌面版完全一致
  3. 但依赖网络，大文件保存可能较慢
  4. 推荐桌面版：体验无差异，离线更稳定

3.2 输入文件

.drawio 文件，XML 格式，结构复杂，不可能手动编写。

典型节点片段就有几十行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" modified="2024-01-01T00:00:00.000Z" agent="draw.io" version="21.0.0" type="device">
  <diagram name="示例图" id="example">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- A: 传感器 -->
        <mxCell id="A" value="传感器" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E0F2F1;strokeColor=#00897B;fontSize=14;fontStyle=1;shadow=1;" vertex="1" parent="1">
          <mxGeometry x="314" y="80" width="120" height="50" as="geometry" />
        </mxCell>

        <!-- B: 保护系统 -->
        <mxCell id="B" value="保护系统" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFEBEE;strokeColor=#C62828;fontSize=14;fontStyle=1;shadow=1;" vertex="1" parent="1">
          <mxGeometry x="154" y="200" width="120" height="50" as="geometry" />
        </mxCell>

        <!-- C: 人机界面 -->
        <mxCell id="C" value="人机界面" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=14;fontStyle=1;shadow=1;" vertex="1" parent="1">
          <mxGeometry x="474" y="200" width="120" height="50" as="geometry" />
        </mxCell>

        <!-- D: 安全注入 -->
        <mxCell id="D" value="安全注入" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=14;fontStyle=1;shadow=1;" vertex="1" parent="1">
          <mxGeometry x="214" y="320" width="120" height="50" as="geometry" />
        </mxCell>

        <!-- E: 冷却剂系统 -->
        <mxCell id="E" value="冷却剂系统" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=14;fontStyle=1;shadow=1;" vertex="1" parent="1">
          <mxGeometry x="314" y="440" width="120" height="50" as="geometry" />
        </mxCell>

        <!-- A → B (FB1, FB2) 标签在边上 -->
        <mxCell id="edge1" value="FB1, FB2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#00897B;strokeWidth=2;dashed=1;fontSize=12;fontColor=#00695C;fontStyle=1;" edge="1" parent="1" source="A" target="B">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>

        <!-- A → C (FB1, FB2) 标签在边上 -->
        <mxCell id="edge2" value="FB1, FB2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#00897B;strokeWidth=2;dashed=1;fontSize=12;fontColor=#00695C;fontStyle=1;" edge="1" parent="1" source="A" target="C">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>

        <!-- B → D (CA1) 标签在边上 -->
        <mxCell id="edge3" value="CA1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#C62828;strokeWidth=2.5;fontSize=12;fontColor=#B71C1C;fontStyle=1;" edge="1" parent="1" source="B" target="D">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>

        <!-- D → E (CA2) 标签在边上 -->
        <mxCell id="edge4" value="CA2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#2E7D32;strokeWidth=2.5;fontSize=12;fontColor=#1B5E20;fontStyle=1;" edge="1" parent="1" source="D" target="E">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>

      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

上述drawio代码的效果如下图所示：

获取方式一：从 Mermaid 导入

  1. draw.io 桌面版 → Arrange → Insert → Advanced → Mermaid
  2. 粘贴 Mermaid 代码 → 自动转成可编辑的 draw.io 图
  3. 默认只有黑白，需要手动加颜色

获取方式二：AI 直接生成

  1. 把需求或 Mermaid 代码发给我
  2. 我输出完整的 .drawio，包含颜色、阴影、圆角等样式
  3. 保存文件后拖入 draw.io 即可编辑

3.3 优缺点

优点 缺点
完全拖拽编辑，所见即所得 输入文件不可手写
颜色、阴影、渐变、圆角精细控制 修改结构不如改代码快
导出 PDF/SVG/PNG 高清图 默认中文可能需要换字体
可从 Mermaid 导入后继续编辑 大型图手动调整坐标较累

四、yEd

4.1 下载安装

方式一：桌面软件（推荐）

  1. 官网下载：https://www.yworks.com/downloads#yed
  2. 选 yEd Graph Editor → Windows 选 .exe 安装包
  3. 安装后离线可用，无需登录注册
  4. 双击 .graphml 文件直接打开编辑

方式二：在线使用

yEd 有在线版（yEd Live），但功能弱于桌面版，且需要网络。推荐桌面版：体验无差异，离线更稳定，自动布局引擎更强。

4.2 安装后必做配置

设置项 路径 推荐值
默认字体 Edit → Preferences → Default Font Microsoft YaHei（微软雅黑）
网格吸附 View → Grid 勾选
自动布局 Layout → Hierarchical 打开文件后一键美化

4.3 输入文件

.graphml 文件，XML 格式，结构比 draw.io 更复杂，不可能手动编写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<graphml xmlns="http://graphml.graphdrawing.org/xmlns"
         xmlns:java="http://www.yworks.com/xml/yfiles-common/1.0/java"
         xmlns:sys="http://www.yworks.com/xml/yfiles-common/markup/primitives/2.0"
         xmlns:x="http://www.yworks.com/xml/yfiles-common/markup/2.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns:y="http://www.yworks.com/xml/graphml"
         xmlns:yed="http://www.yworks.com/xml/yed/3"
         xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns http://www.yworks.com/xml/schema/graphml/1.1/ygraphml.xsd">

  <key for="node" id="d0" yfiles.type="nodegraphics"/>
  <key for="edge" id="d1" yfiles.type="edgegraphics"/>

  <graph id="G" edgedefault="directed">

    <!-- A: 传感器 -->
    <node id="A">
      <data key="d0">
        <y:ShapeNode>
          <y:Geometry height="50" width="120" x="314" y="80"/>
          <y:Fill color="#E0F2F1" transparent="false"/>
          <y:BorderStyle color="#00897B" type="line" width="2.5"/>
          <y:NodeLabel alignment="center" autoSizePolicy="content" fontFamily="Microsoft YaHei" fontSize="14" fontStyle="bold" textColor="#004D40">传感器</y:NodeLabel>
          <y:Shape type="roundrectangle"/>
        </y:ShapeNode>
      </data>
    </node>

    <!-- B: 保护系统 -->
    <node id="B">
      <data key="d0">
        <y:ShapeNode>
          <y:Geometry height="50" width="120" x="154" y="200"/>
          <y:Fill color="#FFEBEE" transparent="false"/>
          <y:BorderStyle color="#C62828" type="line" width="2.5"/>
          <y:NodeLabel alignment="center" autoSizePolicy="content" fontFamily="Microsoft YaHei" fontSize="14" fontStyle="bold" textColor="#B71C1C">保护系统</y:NodeLabel>
          <y:Shape type="roundrectangle"/>
        </y:ShapeNode>
      </data>
    </node>

    <!-- C: 人机界面 -->
    <node id="C">
      <data key="d0">
        <y:ShapeNode>
          <y:Geometry height="50" width="120" x="474" y="200"/>
          <y:Fill color="#E3F2FD" transparent="false"/>
          <y:BorderStyle color="#1565C0" type="line" width="2.5"/>
          <y:NodeLabel alignment="center" autoSizePolicy="content" fontFamily="Microsoft YaHei" fontSize="14" fontStyle="bold" textColor="#0D47A1">人机界面</y:NodeLabel>
          <y:Shape type="roundrectangle"/>
        </y:ShapeNode>
      </data>
    </node>

    <!-- D: 安全注入 -->
    <node id="D">
      <data key="d0">
        <y:ShapeNode>
          <y:Geometry height="50" width="120" x="214" y="320"/>
          <y:Fill color="#E8F5E9" transparent="false"/>
          <y:BorderStyle color="#2E7D32" type="line" width="2.5"/>
          <y:NodeLabel alignment="center" autoSizePolicy="content" fontFamily="Microsoft YaHei" fontSize="14" fontStyle="bold" textColor="#1B5E20">安全注入</y:NodeLabel>
          <y:Shape type="roundrectangle"/>
        </y:ShapeNode>
      </data>
    </node>

    <!-- E: 冷却剂系统 -->
    <node id="E">
      <data key="d0">
        <y:ShapeNode>
          <y:Geometry height="50" width="120" x="314" y="440"/>
          <y:Fill color="#E8F5E9" transparent="false"/>
          <y:BorderStyle color="#2E7D32" type="line" width="2.5"/>
          <y:NodeLabel alignment="center" autoSizePolicy="content" fontFamily="Microsoft YaHei" fontSize="14" fontStyle="bold" textColor="#1B5E20">冷却剂系统</y:NodeLabel>
          <y:Shape type="roundrectangle"/>
        </y:ShapeNode>
      </data>
    </node>

    <!-- A → B (FB1, FB2) 虚线 -->
    <edge id="e1" source="A" target="B">
      <data key="d1">
        <y:PolyLineEdge>
          <y:LineStyle color="#00897B" type="dashed" width="2.0"/>
          <y:Arrows source="none" target="standard"/>
          <y:EdgeLabel alignment="center" backgroundColor="#FFFFFF" fontFamily="Microsoft YaHei" fontSize="12" fontStyle="bold" textColor="#00695C">FB1, FB2</y:EdgeLabel>
        </y:PolyLineEdge>
      </data>
    </edge>

    <!-- A → C (FB1, FB2) 虚线 -->
    <edge id="e2" source="A" target="C">
      <data key="d1">
        <y:PolyLineEdge>
          <y:LineStyle color="#00897B" type="dashed" width="2.0"/>
          <y:Arrows source="none" target="standard"/>
          <y:EdgeLabel alignment="center" backgroundColor="#FFFFFF" fontFamily="Microsoft YaHei" fontSize="12" fontStyle="bold" textColor="#00695C">FB1, FB2</y:EdgeLabel>
        </y:PolyLineEdge>
      </data>
    </edge>

    <!-- B → D (CA1) 实线 -->
    <edge id="e3" source="B" target="D">
      <data key="d1">
        <y:PolyLineEdge>
          <y:LineStyle color="#C62828" type="line" width="2.5"/>
          <y:Arrows source="none" target="standard"/>
          <y:EdgeLabel alignment="center" backgroundColor="#FFFFFF" fontFamily="Microsoft YaHei" fontSize="12" fontStyle="bold" textColor="#B71C1C">CA1</y:EdgeLabel>
        </y:PolyLineEdge>
      </data>
    </edge>

    <!-- D → E (CA2) 实线 -->
    <edge id="e4" source="D" target="E">
      <data key="d1">
        <y:PolyLineEdge>
          <y:LineStyle color="#2E7D32" type="line" width="2.5"/>
          <y:Arrows source="none" target="standard"/>
          <y:EdgeLabel alignment="center" backgroundColor="#FFFFFF" fontFamily="Microsoft YaHei" fontSize="12" fontStyle="bold" textColor="#1B5E20">CA2</y:EdgeLabel>
        </y:PolyLineEdge>
      </data>
    </edge>

  </graph>
</graphml>

上述graphml代码的效果如下图所示：

唯一获取方式：AI 从 Mermaid 转换

  1. 你提供 Mermaid 代码或描述需求
  2. 我转换成 .graphml 文件
  3. 你保存后拖入 yEd → Layout → Hierarchical 一键自动布局
  4. 微调颜色、字体等细节

4.4 核心操作

操作 快捷键
全选节点 Ctrl + A
全选边 Ctrl + Shift + A
层级布局 Layout → Hierarchical
正交布局 Layout → Orthogonal
导出 PDF File → Export → PDF（勾选 “Embed fonts”）

4.5 优缺点

优点 缺点
自动布局算法极强，一键美化 输入文件完全依赖 AI 生成
适合几十上百节点的大型图 必须安装桌面软件
跨层连线自动路由 默认字体差，需手动设为微软雅黑
导出 PDF/SVG 高清，支持字体嵌入 没有样式刷，批量修改稍繁琐

五、三种方式协作流程

1
2
3
4
5
6
7
8
9
第一步：用 Mermaid 快速画草稿
   ↓ （手写 .mmd 或 AI 生成）
第二步：AI 转换成目标格式
   ↓
第三步：在编辑器中精修
   ├─ 简单图 → draw.io（拖拽美化）
   └─ 复杂图 → yEd（自动布局 + 微调）
   ↓
第四步：导出高清图片 / PDF

各取所长：

  • Mermaid：快速表达逻辑，手写无门槛
  • draw.io：精细排版，适合 20 个节点以内的正式图表
  • yEd：自动布局，适合 50+ 节点的复杂系统架构

六、快速参考卡片

我想… 用什么
手写几行代码快速出图 Mermaid 在线版
拿到 .mmd 看效果 粘贴到 https://mermaid.live
在 VS Code 里预览 Mermaid 装 Markdown Preview Mermaid Support
把 Mermaid 转成可拖拽的图 draw.io 桌面版 Insert → Mermaid
拿到一个 .drawio 文件 拖入 draw.io 桌面版
拿到一个 .graphml 文件 拖入 yEd 桌面版
给 yEd 图换个好看的字体 Edit → Preferences → Default Font
让 yEd 自动排整齐 Layout → Hierarchical
导出高清图片 三款工具的桌面版或者在线版都支持
让 AI 帮我画图 把需求描述或 Mermaid 代码发给我