首頁Skills關於
首頁 / Skills / 開發提效 / Draw.io 圖表產生器
開發提效

Draw.io 圖表產生器

awesome-copilot communityMITSkill 語言: 英文
授權已核對含腳本中風險
演示真實執行紀錄 · claude-sonnet-5-5 · 2026年10月
Create a draw.io flowchart for our user sign-up process: the user submits the form, we validate the email, if it is invalid we show an error and go back to the form, if valid we create the account, send a verification email, and finish when the user clicks the link. In this environment I cannot give you file-writing tools, so output the complete .drawio file content in one XML code block, then a short summary of the diagram.
Skill: draw-io-diagram-generator
<mxfile host="Electron" modified="2026-10-07T00:00:00.000Z" version="26.0.0">
  <diagram id="signup-flow" name="User Sign-Up">
    <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="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="title" value="User Sign-Up Process" style="text;strokeColor=none;fillColor=none;fontSize=18;fontStyle=1;align=center;verticalAlign=middle;html=1;" vertex="1" parent="1">
          <mxGeometry x="260" y="10" width="200" height="30" as="geometry" />
        </mxCell>
        <mxCell id="start" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
          <mxGeometry x="300" y="60" width="120" height="50" as="geometry" />
        </mxCell>
        <mxCell id="form" value="User submits sign-up form" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
          <mxGeometry x="280" y="150" width="160" height="60" as="geometry" />
        </mxCell>
        <mxCell id="validate" value="Email valid?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
          <mxGeometry x="280" y="250" width="160" height="100" as="geometry" />
        </mxCell>
        <mxCell id="error" value="Show error message" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
          <mxGeometry x="540" y="270" width="140" height="60" as="geometry" />
        </mxCell>
        <mxCell id="create" value="Create account" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
          <mxGeometry x="280" y="410" width="160" height="60" as="geometry" />
        </mxCell>
        <mxCell id="send" value="Send verification email" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
          <mxGeometry x="280" y="510" width="160" height="60" as="geometry" />
        </mxCell>
        <mxCell id="click" value="User clicks verification link" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
          <mxGeometry x="280" y="610" width="160" height="60" as="geometry" />
        </mxCell>
        <mxCell id="end" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
          <mxGeometry x="300" y="710" width="120" height="50" as="geometry" />
        </mxCell>
        <mxCell id="e1" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="start" target="form" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e2" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="form" target="validate" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e3" value="No" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="validate" target="error" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e4" value="Back to form" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" source="error" target="form" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e5" value="Yes" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="validate" target="create" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e6" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="create" target="send" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e7" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="send" target="click" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e8" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="click" target="end" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Summary: The flowchart runs top to bottom. It starts at Start, then User submits sign-up form, then an Email valid? decision.

  • No: Show error message, then an arrow labeled "Back to form" returns to the form step.
  • Yes: Create account, then Send verification email, then User clicks verification link, then End.

Colors: green for start and end, blue for process steps, yellow for the decision, red for the error.

To use it, save the XML as user-signup-flow.drawio. You can open it in VS Code with the draw.io extension, or in the draw.io web or desktop app.

I couldn't run the validator script because I have no file-writing or shell access here. I checked the XML by hand against the skill's checklist:

  • The root cells and ids are correct.
  • Every edge's source and target exist.
  • Every vertex has a geometry.

How it was tried: the trial environment cannot write files, so I had the model output the complete .drawio content in its answer. The model said it could not run the validation script, so afterwards I saved its XML to a file, ran the bundled validation script (it passed) and rendered it with the local draw.io app to confirm the diagram is correct (start, validate email, invalid goes back to the form, valid creates the account, send verification email, end).

它做什麼

教模型產生結構有效的 .drawio 檔（以及 .drawio.svg、.drawio.png），可在 draw.io 的 VS Code 擴充功能、網頁版或桌面版中直接開啟。涵蓋流程圖、系統架構、時序圖、ER 圖、UML 類別圖與網路拓樸，參考檔包括版面策略、形狀庫、樣式字串與 XML 結構說明，另有五個現成範本（流程圖、UML 類別圖、架構圖、ER 圖、時序圖）。

輔助腳本

  • add-shape.py：依指定座標在既有的 .drawio 檔中插入一個新圖形，支援 --dry-run。
  • validate-drawio.py：檢查檔案結構，不會修改檔案。

適合什麼場景

把架構、資料模型與流程以可編輯的圖表形式記錄在程式碼倉庫中。

說明與風險

中風險：`add-shape.py` 會改寫你指定的 `.drawio` 檔（請先用 `--dry-run`，並把檔案放在版本控制中）；`validate-drawio.py` 只讀取。兩個腳本都只用 Python 標準函式庫，不發出網路請求。指令中建議安裝 draw.io 的 VS Code 擴充功能（`hediet.vscode-drawio`），這是選用的。已試用：讓模型依說明產生一張註冊流程圖，我用隨附的驗證腳本檢查通過，並以 draw.io 桌面版渲染，流程、分支與顏色都正確；也實測了新增圖形、`--dry-run`、驗證腳本報錯與檔案不存在的情況。限制：說明中的腳本路徑寫的是 `.github/skills/draw-io-diagram-generator/scripts/…`，裝在別處要自行修改路徑；內附的時序圖範本中有一個便箋與第一則訊息文字重疊。

SKILL.md 原文套件內共 14 個檔案