AI生成可編寫的流程圖與架構圖
透過 ChatGPT 生成可編寫的流程圖與架構圖，可節省時間與精力。
流程圖 - Mermaid
將現有流程圖貼至 ChatGpt 打開 ChatGPT，先貼上圖片，再輸入prompt
將圖片轉成 mermaid範例如此圖:
chatGPT 生成此mermaid語法
sequenceDiagram
actor 教務用戶
participant 教務主界面
participant 學生資訊
participant 管理學生資訊
participant 資料庫
教務用戶 ->> 教務主界面: 進入主頁
教務主界面 -->> 教務用戶: 成功進入…
教務用戶 ->> 學生資訊: 請求查看學生信息
學生資訊 ->> 資料庫: 請求信息
資料庫 -->> 教務用戶: 返回學生信息
教務用戶 ->> 管理學生資訊: 管理學生資訊
管理學生資訊 ->> 資料庫: 更新信息
資料庫 -->> 教務用戶: 學生資訊更改成功
可將此mermaid語法貼到網頁上，查看圖形 https://www.mermaidchart.com/
可分享，或保存為圖檔
如此連結：https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=toggle#pako:eNqrVkrOT0lVslIqTi0sTc1LTnXJTEwvSsyNyVMAgsTkkvwihWdTZz7tnvl8yopnHdsg4gWJRSWZyZkFiXklUNknO3Y_n9rzcu4iTAVP1-54PmX-i83tL1Z0Yco-X7fw-YQ2_GqA4s-mzXy6a3VMHkQS2UUKunZ26I6wUnjZsOlp61KgwMsFjch64EoUdBH6IAZZKTzrmPC0az5E66OGZThtQ3atlcKL1d3PNjY9m7_0-ZxuiMyT_QufNa6HaEZWC9YM9wxMJ7JquCQ2573YP-Xp7HmoVuBwIWaoWuEMaUxxdHc-m73l2bQNRLsT2SiQ1ik7IQEbk6dUCwDwwFj3
網站架構圖 - Draw.io
將現有架構圖貼至 ChatGpt 打開 ChatGPT，先貼上圖片，再輸入prompt
提供一個可直接匯入 draw.io / diagrams.net 的 XML，用相同元件及配色範例如此圖:
chatGPT 生成此mermaid語法
<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net">
<diagram name="校園網路拓撲">
<mxGraphModel dx="1400" dy="950" grid="1" gridSize="10"
guides="1" tooltips="1" connect="1" arrows="1"
fold="1" page="1" pageScale="1" pageWidth="1169"
pageHeight="827" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- 雲端 -->
<mxCell id="tanet" value="TANet"
style="shape=mxgraph.cisco.misc.cloud;html=1;fillColor=#D0E5F4;"
vertex="1" parent="1">
<mxGeometry x="20" y="40" width="110" height="60" as="geometry"/>
</mxCell>
<mxCell id="hinet" value="HiNet"
style="shape=mxgraph.cisco.misc.cloud;html=1;fillColor=#D0E5F4;"
vertex="1" parent="1">
<mxGeometry x="20" y="150" width="110" height="60" as="geometry"/>
</mxCell>
<!-- Router / IDS -->
<mxCell id="router" value="路由器"
style="shape=mxgraph.cisco.routersSwitches.router;html=1;"
vertex="1" parent="1">
<mxGeometry x="190" y="60" width="90" height="45" as="geometry"/>
</mxCell>
<mxCell id="ids" value="入侵偵測系統"
style="shape=mxgraph.cisco.security.ips;html=1;"
vertex="1" parent="1">
<mxGeometry x="340" y="40" width="90" height="50" as="geometry"/>
</mxCell>
<!-- 智慧型網路管理器 & 防火牆 -->
<mxCell id="smart" value="智慧型網路 管理器"
style="shape=mxgraph.cisco.routersSwitches.switch;html=1;"
vertex="1" parent="1">
<mxGeometry x="340" y="150" width="90" height="50" as="geometry"/>
</mxCell>
<mxCell id="fw1" value="防火牆 / IPS"
style="shape=mxgraph.cisco.security.firewall;html=1;"
vertex="1" parent="1">
<mxGeometry x="340" y="245" width="90" height="45" as="geometry"/>
</mxCell>
<mxCell id="appfw" value="應用程式 防火牆"
style="shape=mxgraph.cisco.security.firewall;html=1;"
vertex="1" parent="1">
<mxGeometry x="340" y="340" width="90" height="45" as="geometry"/>
</mxCell>
<!-- 右側防火牆 & 伺服器匯聚交換器 -->
<mxCell id="fw2" value="防火牆 / IPS"
style="shape=mxgraph.cisco.security.firewall;html=1;"
vertex="1" parent="1">
<mxGeometry x="550" y="300" width="90" height="45" as="geometry"/>
</mxCell>
<mxCell id="vsw" value="伺服器匯聚交換器"
style="shape=mxgraph.cisco.routersSwitches.switch;html=1;"
vertex="1" parent="1">
<mxGeometry x="690" y="250" width="95" height="50" as="geometry"/>
</mxCell>
<!-- 虛擬化伺服器 -->
<mxCell id="srv1" style="shape=mxgraph.cisco.servers.generic_server;html=1;"
vertex="1" parent="1">
<mxGeometry x="830" y="140" width="55" height="80" as="geometry"/>
</mxCell>
<mxCell id="srv2" style="shape=mxgraph.cisco.servers.generic_server;html=1;"
vertex="1" parent="1">
<mxGeometry x="870" y="225" width="55" height="80" as="geometry"/>
</mxCell>
<mxCell id="srv3" style="shape=mxgraph.cisco.servers.generic_server;html=1;"
vertex="1" parent="1">
<mxGeometry x="830" y="310" width="55" height="80" as="geometry"/>
</mxCell>
<mxCell id="srvLbl" value="虛擬化伺服器系統"
style="text;html=1;strokeColor=none;fontSize=12;fontStyle=1;"
vertex="1" parent="1">
<mxGeometry x="905" y="230" width="130" height="25" as="geometry"/>
</mxCell>
<!-- 核心交換器 (雲疊加) -->
<mxCell id="coreCloud"
style="shape=mxgraph.cisco.misc.cloud;html=1;fillColor=#D0E5F4;opacity=50;"
vertex="1" parent="1">
<mxGeometry x="445" y="430" width="140" height="85" as="geometry"/>
</mxCell>
<mxCell id="core" value="10GbE核心 網路交換器"
style="shape=mxgraph.cisco.routersSwitches.switch;html=1;"
vertex="1" parent="1">
<mxGeometry x="470" y="440" width="90" height="65" as="geometry"/>
</mxCell>
<!-- 宿舍、大樓 -->
<mxCell id="fdorm" value="女生宿舍"
style="shape=mxgraph.cisco.routersSwitches.switch;html=1;"
vertex="1" parent="1">
<mxGeometry x="140" y="340" width="95" height="40" as="geometry"/>
</mxCell>
<mxCell id="sdorm" value="學人宿舍"
style="shape=mxgraph.cisco.routersSwitches.switch;html=1;"
vertex="1" parent="1">
<mxGeometry x="140" y="425" width="95" height="40" as="geometry"/>
</mxCell>
<mxCell id="mdhub" value="男生宿舍"
style="shape=mxgraph.cisco.misc.hub;html=1;"
vertex="1" parent="1">
<mxGeometry x="70" y="490" width="70" height="35" as="geometry"/>
</mxCell>
<mxCell id="adminSw" value="各教學與行政大樓網路機房"
style="shape=mxgraph.cisco.routersSwitches.switch;html=1;"
vertex="1" parent="1">
<mxGeometry x="140" y="540" width="155" height="45" as="geometry"/>
</mxCell>
<!-- 電腦教室 -->
<mxCell id="labSw" value="電腦教室 教學網路"
style="shape=mxgraph.cisco.routersSwitches.switch;html=1;"
vertex="1" parent="1">
<mxGeometry x="350" y="590" width="100" height="50" as="geometry"/>
</mxCell>
<mxCell id="rack1" style="shape=mxgraph.cisco.misc.rack;html=1;"
vertex="1" parent="1">
<mxGeometry x="480" y="640" width="55" height="35" as="geometry"/>
</mxCell>
<mxCell id="rack2" style="shape=mxgraph.cisco.misc.rack;html=1;"
vertex="1" parent="1">
<mxGeometry x="540" y="655" width="55" height="35" as="geometry"/>
</mxCell>
<mxCell id="rackLbl" value="各電腦教室網路機櫃"
style="text;html=1;strokeColor=none;fontSize=12;fontStyle=1;"
vertex="1" parent="1">
<mxGeometry x="480" y="695" width="160" height="25" as="geometry"/>
</mxCell>
<!-- 無線區 -->
<mxCell id="wifiFw" value="無線網路"
style="shape=mxgraph.cisco.security.firewall;html=1;"
vertex="1" parent="1">
<mxGeometry x="350" y="500" width="90" height="45" as="geometry"/>
</mxCell>
<mxCell id="ctrl" value="管控系統"
style="shape=mxgraph.cisco.routersSwitches.router;html=1;"
vertex="1" parent="1">
<mxGeometry x="540" y="500" width="90" height="45" as="geometry"/>
</mxCell>
<mxCell id="ap1"
style="shape=mxgraph.cisco.wireless.accessPoint;html=1;"
vertex="1" parent="1">
<mxGeometry x="680" y="450" width="35" height="70" as="geometry"/>
</mxCell>
<mxCell id="ap2"
style="shape=mxgraph.cisco.wireless.accessPoint;html=1;"
vertex="1" parent="1">
<mxGeometry x="680" y="540" width="35" height="70" as="geometry"/>
</mxCell>
<mxCell id="ap3"
style="shape=mxgraph.cisco.wireless.accessPoint;html=1;"
vertex="1" parent="1">
<mxGeometry x="680" y="630" width="35" height="70" as="geometry"/>
</mxCell>
<mxCell id="apLbl" value="各教學大樓 無線基地台"
style="text;html=1;strokeColor=none;fontSize=12;fontStyle=1;"
vertex="1" parent="1">
<mxGeometry x="730" y="540" width="110" height="35" as="geometry"/>
</mxCell>
<!-- 連線：顏色=頻寬 -->
<!-- 1G 藍 -->
<mxCell id="e1" value="1Gbps"
style="edgeStyle=elbowEdgeStyle;strokeColor=#0000FF;strokeWidth=2;fontColor=#0000FF;endArrow=none;"
edge="1" parent="1" source="tanet" target="router">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e2" value="1Gbps"
style="edgeStyle=orthogonalEdgeStyle;strokeColor=#0000FF;strokeWidth=2;fontColor=#0000FF;endArrow=none;"
edge="1" parent="1" source="router" target="ids">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e3" value="1Gbps"
style="edgeStyle=orthogonalEdgeStyle;strokeColor=#0000FF;strokeWidth=2;fontColor=#0000FF;endArrow=none;"
edge="1" parent="1" source="ids" target="smart">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e4" value="1G/600M FTTx線路×3"
style="edgeStyle=orthogonalEdgeStyle;strokeColor=#8B4513;strokeWidth=3;fontColor=#8B4513;endArrow=none;"
edge="1" parent="1" source="hinet" target="smart">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<!-- 10G 紅 -->
<mxCell id="e5" value="10Gbps"
style="edgeStyle=orthogonalEdgeStyle;strokeColor=#FF0000;strokeWidth=2;fontColor=#FF0000;endArrow=none;"
edge="1" parent="1" source="smart" target="fw1">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e6" value="10Gbps"
style="edgeStyle=orthogonalEdgeStyle;strokeColor=#FF0000;strokeWidth=2;fontColor=#FF0000;endArrow=none;"
edge="1" parent="1" source="fw1" target="appfw">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<!-- 40G 綠 -->
<mxCell id="e7" value="40Gbps"
style="edgeStyle=orthogonalEdgeStyle;strokeColor=#009933;strokeWidth=2;fontColor=#009933;endArrow=none;"
edge="1" parent="1" source="appfw" target="fw2">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e8" value="40Gbps"
style="edgeStyle=orthogonalEdgeStyle;strokeColor=#009933;strokeWidth=2;fontColor=#009933;endArrow=none;"
edge="1" parent="1" source="fw2" target="vsw">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<!-- VSwitch → Servers (10G 紅) -->
<mxCell id="e9" value="10Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#FF0000;strokeWidth=2;fontColor=#FF0000;endArrow=none;"
edge="1" parent="1" source="vsw" target="srv1">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e10" value="10Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#FF0000;strokeWidth=2;fontColor=#FF0000;endArrow=none;"
edge="1" parent="1" source="vsw" target="srv2">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e11" value="10Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#FF0000;strokeWidth=2;fontColor=#FF0000;endArrow=none;"
edge="1" parent="1" source="vsw" target="srv3">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<!-- appfw → core (10G 紅) -->
<mxCell id="e12" value="10Gbps"
style="edgeStyle=orthogonalEdgeStyle;strokeColor=#FF0000;strokeWidth=2;fontColor=#FF0000;endArrow=none;"
edge="1" parent="1" source="appfw" target="core">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<!-- core → 各分支 (10G 紅) -->
<mxCell id="e13" value="10Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#FF0000;strokeWidth=2;fontColor=#FF0000;endArrow=none;"
edge="1" parent="1" source="core" target="fdorm">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e14" value="10Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#FF0000;strokeWidth=2;fontColor=#FF0000;endArrow=none;"
edge="1" parent="1" source="core" target="sdorm">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e15" value="10Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#FF0000;strokeWidth=2;fontColor=#FF0000;endArrow=none;"
edge="1" parent="1" source="core" target="adminSw">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e16" value="10Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#FF0000;strokeWidth=2;fontColor=#FF0000;endArrow=none;"
edge="1" parent="1" source="core" target="labSw">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e17" value="10Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#FF0000;strokeWidth=2;fontColor=#FF0000;endArrow=none;"
edge="1" parent="1" source="core" target="wifiFw">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<!-- sdorm → mdhub (1G 藍) -->
<mxCell id="e18" value="1Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#0000FF;strokeWidth=2;fontColor=#0000FF;endArrow=none;"
edge="1" parent="1" source="sdorm" target="mdhub">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<!-- wifiFw → ctrl (1G 藍) -->
<mxCell id="e19" value="1Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#0000FF;strokeWidth=2;fontColor=#0000FF;endArrow=none;"
edge="1" parent="1" source="wifiFw" target="ctrl">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<!-- ctrl → APs (1G 藍) -->
<mxCell id="e20" value="1Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#0000FF;strokeWidth=2;fontColor=#0000FF;endArrow=none;"
edge="1" parent="1" source="ctrl" target="ap1">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e21" value="1Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#0000FF;strokeWidth=2;fontColor=#0000FF;endArrow=none;"
edge="1" parent="1" source="ctrl" target="ap2">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e22" value="1Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#0000FF;strokeWidth=2;fontColor=#0000FF;endArrow=none;"
edge="1" parent="1" source="ctrl" target="ap3">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<!-- labSw → racks (1G 藍) -->
<mxCell id="e23" value="1Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#0000FF;strokeWidth=2;fontColor=#0000FF;endArrow=none;"
edge="1" parent="1" source="labSw" target="rack1">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="e24" value="1Gbps"
style="edgeStyle=straightEdgeStyle;strokeColor=#0000FF;strokeWidth=2;fontColor=#0000FF;endArrow=none;"
edge="1" parent="1" source="labSw" target="rack2">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>使用Graw.io方法
- 開啟notepad, 將上面結構複製到剪貼簿，另存檔案, 在 draw.io 中選「File → Import From → Device」
- 或直接開啟一起空白的 Draw.io 在空白處貼上剪貼簿內容，選取或貼上整段 XML 即可還原圖形。 若要再調整位置或樣式，可照常拖曳、變更色彩與連線樣式。
可將此最後的編輯結果，另外成 Draw.io 檔案。