用 AI 一招搞定可视化图表，值得收藏的 Claude 提示词

前两天，尝试了用 DeepSeek 半分钟生成软件系统架构图，但是生成的 PlantUML 虽然逻辑清晰，但是界面不够漂亮。今天恰好在小红书上刷到一个不错的替代方案，就是通过 AI 生成 draw.io 的代码。

例如，作为示例，我想生成一个“Android 平板控制脑机设备的逻辑流程”的可视化图表。

效果图

先看效果

提示词

根据描述直接生成可以运行的 draw.io 代码：描述 Android 平板控制脑机设备的逻辑流程

注意，最好是使用 claude 来生成代码。因为之前试过 google gemini 2.0 flash 效果也不是很理想。还是 claude 更靠谱一些。可能是 claude 专注于代码领域吧。

由于 claude 的锁区问题，我即便使用了德国的代理，也不行。所以只能使用 VSCode 中的 github copilot 自带的 claude。使用 chat 模式就足够了。

生成的 draw.io 代码

<mxfile host="app.diagrams.net" modified="2025-03-23T12:00:00.000Z" agent="5.0 (Windows)" etag="abc123" version="21.0.0" type="device">
  <diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">
    <mxGraphModel dx="1422" dy="762" 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="WIyWlLk6GJQsqaUBKTNV-0" />
        <mxCell id="WIyWlLk6GJQsqaUBKTNV-1" parent="WIyWlLk6GJQsqaUBKTNV-0" />
        <mxCell id="start" value="开始" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="354" y="80" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="app-init" value="Android应用初始化" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="354" y="170" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="conn-check" value="检查脑机设备连接" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="349" y="260" width="130" height="80" as="geometry" />
        </mxCell>
        <mxCell id="connect-device" value="建立蓝牙/WiFi连接" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="174" y="270" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="init-params" value="初始化脑机接口参数" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="354" y="370" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="data-acquisition" value="脑电数据采集" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="354" y="460" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="data-processing" value="信号处理与特征提取" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="354" y="550" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="command-generation" value="生成控制命令" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="354" y="640" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="feedback-display" value="用户界面反馈" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="534" y="550" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="monitoring" value="监控设备状态和信号质量" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="174" y="550" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="execute-command" value="执行控制命令" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="354" y="730" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="end-session" value="结束会话?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="349" y="820" width="130" height="80" as="geometry" />
        </mxCell>
        <mxCell id="end" value="结束" style="ellipse;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="354" y="930" width="120" height="60" as="geometry" />
        </mxCell>
        <mxCell id="error-handling" value="错误处理和恢复" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
          <mxGeometry x="534" y="370" width="120" height="60" as="geometry" />
        </mxCell>
        
        <!-- 连接线 -->
        <mxCell id="edge1" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="start" target="app-init">
          <mxGeometry width="50" height="50" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="edge2" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="app-init" target="conn-check">
          <mxGeometry width="50" height="50" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="edge3" value="未连接" style="endArrow=classic;html=1;rounded=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="conn-check" target="connect-device">
          <mxGeometry width="50" height="50" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="edge4" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="connect-device" target="conn-check">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="234" y="240" />
              <mxPoint x="320" y="240" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="edge5" value="已连接" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="conn-check" target="init-params">
          <mxGeometry width="50" height="50" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="edge6" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="init-params" target="data-acquisition">
          <mxGeometry width="50" height="50" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="edge7" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="data-acquisition" target="data-processing">
          <mxGeometry width="50" height="50" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="edge8" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="data-processing" target="command-generation">
          <mxGeometry width="50" height="50" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="edge9" value="" style="endArrow=classic;html=1;rounded=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="data-processing" target="feedback-display">
          <mxGeometry width="50" height="50" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="edge10" value="" style="endArrow=classic;html=1;rounded=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="data-processing" target="monitoring">
          <mxGeometry width="50" height="50" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="edge11" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="command-generation" target="execute-command">
          <mxGeometry width="50" height="50" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="edge12" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="execute-command" target="end-session">
          <mxGeometry width="50" height="50" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="edge13" value="是" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="end-session" target="end">
          <mxGeometry width="50" height="50" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="edge14" value="否" style="endArrow=classic;html=1;rounded=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="end-session">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="120" y="860" as="targetPoint" />
            <Array as="points">
              <mxPoint x="120" y="860" />
              <mxPoint x="120" y="490" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="edge15" value="" style="endArrow=classic;html=1;rounded=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" target="data-acquisition">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="120" y="490" as="sourcePoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="edge16" value="" style="endArrow=classic;html=1;rounded=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="init-params" target="error-handling">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="494" y="400" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="edge17" value="出错时" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=0;exitDx=0;exitDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="error-handling">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="594" y="310" as="targetPoint" />
            <Array as="points">
              <mxPoint x="594" y="310" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="edge18" value="" style="endArrow=classic;html=1;rounded=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" target="conn-check">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="594" y="310" as="sourcePoint" />
            <Array as="points">
              <mxPoint x="520" y="310" />
            </Array>
          </mxGeometry>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

把上面的代码，复制到 draw.io 中即可。就能生成上面看到可视化图表。

微信关注我哦 👍

大象工具微信公众号

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，查看更多联系方式

生活	跑步清单足球鲁班探索孤独的美食家驾驶电视剧收纳奶爸健康 game 电影周末 joke
Geek	健身 Laravel Git Vim MySQL Linux UI Windows SVN 纪录片管理 Shell 游记工具手机 BackboneJS 自建博客 Mac DNS Tornado CDN Django Python AngularJS 理财前端 Nginx 爬虫 Redis Javascript Browser 浏览器推广 OAuth CSS PHP Social Networks 安全运维创业杂记 VueJS Android Image IDE Java ReactJS 数据分析 SQLite RESTful 读书笔记家电 ecshop Vagrant wordpress docker SEO GTD magento mongodb nodejs weex 冷知识 ruby iOS 微信小程序 AI CMS 快应用 backpack 广告联盟 OA 短信 UWP Win CSharp Tampermonkey graphviz 钉钉 WPS 数据字典微信公众号 Fuchsia Adobe XD SQL Server thinkphp 代码规范商业模式 Flutter 头痛的问题 serverless 视频制作国际化 golang 服务器 Kotlin 网站建设 5G 笔记本图片 spark spring 物联网 InfluxDB 图像识别 postgre rust 提示词
成长的烦恼	闲言碎语待产不睡觉写作程序员孙心然语录原则大鸿语录
地球	植物时间中文赚钱国家地理烟台一生伏首拜阳明 emoji 弟子规英文国际贸易

效果图

提示词

生成的 draw.io 代码

微信关注我哦 👍

相关文章 🔍

所有分类

相关笔记

关于

应用及工具

骄傲地使用