前言

最近需要画很多流程图，于是在DrawIO 上面画了很多的流程图。

现在的各种AI这么发达，有没有办法让AI帮我们自动画图呢？有的兄弟有的。DrawIO官方在三个月前发布了自己的官方MCP：jgraph/drawio-mcp

接入ChatGPT

获取管理员权限

需要在设置-应用里开启开发人员模式：

开启开发人员模式

要注意，开启之后，会强制关闭记忆，不太方便了。仅限调试。

对于Team套餐，需要让自己车的所有者或管理员为每个人开启创建应用的权限，才能正常开启开发人员模式。

接入官方MCP

阅读官方的README可以知道，有两种接入方式：MCP App Server和MCP Tool Server。

  • MCP App Server：直接在网页对话中显示为可交互iFrame框架
  • MCP Tool Server：适合被命令行工具调用，如CC

开启开发人员模式后点击上面的“创建应用”：

应用配置

随后就能在对话中的“更多”里看到自己创建的应用：

自己创建的MCP应用

测试

输入要求让它画图，最上面总会报错，原因是ChatGPT会将XML再包裹一层JSON。万幸的是，官方对此早有准备，会拆解最大四层JSON结构并提取出原始XML字段。

生成一个Oauth的认证流程图

感觉效果不太行。

非官方应用

谷歌搜索搜出的是这个应用：ChatGPT - Draw.io Creator

让它生成，它会生成可以直接导入的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
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<mxGraphModel dx="1422" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1600" pageHeight="1100" math="0" shadow="0">
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>

    <mxCell id="title" value="OAuth2 授权码流程时序图" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
      <mxGeometry x="80" y="30" width="260" height="30" as="geometry"/>
    </mxCell>

    <mxCell id="user_head" value="资源拥有者&#xa;/ 用户" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="80" y="80" width="130" height="50" as="geometry"/>
    </mxCell>
    <mxCell id="browser_head" value="用户代理&#xa;/ 浏览器" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="270" y="80" width="130" height="50" as="geometry"/>
    </mxCell>
    <mxCell id="client_head" value="客户端应用&#xa;Client" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="460" y="80" width="140" height="50" as="geometry"/>
    </mxCell>
    <mxCell id="auth_head" value="授权服务器&#xa;Authorization Server" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="670" y="80" width="170" height="50" as="geometry"/>
    </mxCell>
    <mxCell id="resource_head" value="资源服务器&#xa;Resource Server" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="930" y="80" width="170" height="50" as="geometry"/>
    </mxCell>

    <mxCell id="user_line" value="" style="endArrow=none;html=1;rounded=1;dashed=1;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="145" y="130" as="sourcePoint"/>
        <mxPoint x="145" y="850" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="browser_line" value="" style="endArrow=none;html=1;rounded=1;dashed=1;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="335" y="130" as="sourcePoint"/>
        <mxPoint x="335" y="850" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="client_line" value="" style="endArrow=none;html=1;rounded=1;dashed=1;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="530" y="130" as="sourcePoint"/>
        <mxPoint x="530" y="850" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="auth_line" value="" style="endArrow=none;html=1;rounded=1;dashed=1;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="755" y="130" as="sourcePoint"/>
        <mxPoint x="755" y="850" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="resource_line" value="" style="endArrow=none;html=1;rounded=1;dashed=1;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="1015" y="130" as="sourcePoint"/>
        <mxPoint x="1015" y="850" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

    <mxCell id="m1" value="1. 访问受保护功能" style="endArrow=block;html=1;rounded=1;whiteSpace=wrap;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="145" y="180" as="sourcePoint"/>
        <mxPoint x="335" y="180" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

    <mxCell id="m2" value="2. 请求客户端页面 / 功能" style="endArrow=block;html=1;rounded=1;whiteSpace=wrap;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="335" y="230" as="sourcePoint"/>
        <mxPoint x="530" y="230" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

    <mxCell id="m3" value="3. 重定向到授权端点&#xa;response_type=code, client_id, redirect_uri, scope, state" style="endArrow=block;html=1;rounded=1;whiteSpace=wrap;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="530" y="290" as="sourcePoint"/>
        <mxPoint x="335" y="290" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

    <mxCell id="m4" value="4. 打开授权请求" style="endArrow=block;html=1;rounded=1;whiteSpace=wrap;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="335" y="350" as="sourcePoint"/>
        <mxPoint x="755" y="350" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

    <mxCell id="m5" value="5. 显示登录 / 授权同意页面" style="endArrow=block;html=1;rounded=1;whiteSpace=wrap;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="755" y="410" as="sourcePoint"/>
        <mxPoint x="335" y="410" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

    <mxCell id="m6" value="6. 用户登录并同意授权" style="endArrow=block;html=1;rounded=1;whiteSpace=wrap;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="145" y="470" as="sourcePoint"/>
        <mxPoint x="335" y="470" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

    <mxCell id="m7" value="7. 提交凭证 / 授权同意" style="endArrow=block;html=1;rounded=1;whiteSpace=wrap;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="335" y="530" as="sourcePoint"/>
        <mxPoint x="755" y="530" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

    <mxCell id="m8" value="8. 重定向到 redirect_uri&#xa;携带 code 与 state" style="endArrow=block;html=1;rounded=1;whiteSpace=wrap;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="755" y="590" as="sourcePoint"/>
        <mxPoint x="335" y="590" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

    <mxCell id="m9" value="9. 请求 redirect_uri&#xa;code, state" style="endArrow=block;html=1;rounded=1;whiteSpace=wrap;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="335" y="650" as="sourcePoint"/>
        <mxPoint x="530" y="650" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

    <mxCell id="m10" value="10. 用授权码换令牌&#xa;grant_type=authorization_code, code, redirect_uri, client_secret" style="endArrow=block;html=1;rounded=1;whiteSpace=wrap;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="530" y="710" as="sourcePoint"/>
        <mxPoint x="755" y="710" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

    <mxCell id="m11" value="11. 返回 access_token / refresh_token" style="endArrow=block;html=1;rounded=1;whiteSpace=wrap;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="755" y="760" as="sourcePoint"/>
        <mxPoint x="530" y="760" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

    <mxCell id="m12" value="12. 携带 access_token 请求受保护资源" style="endArrow=block;html=1;rounded=1;whiteSpace=wrap;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="530" y="810" as="sourcePoint"/>
        <mxPoint x="1015" y="810" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

    <mxCell id="m13" value="13. 返回受保护资源" style="endArrow=block;html=1;rounded=1;whiteSpace=wrap;" edge="1" parent="1">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="1015" y="850" as="sourcePoint"/>
        <mxPoint x="530" y="850" as="targetPoint"/>
      </mxGeometry>
    </mxCell>

  </root>
</mxGraphModel>

导入后是这个样子：

非官方绘制的Oauth流程图

效果似乎还不错？不知道是不是我调用官方的MCP方式不正确。