Diagent × Claude Code — 你喺條片見到嘅嘢，
而家喺你眼前再發生一次。
呢個 demo 係模擬 — 裝好之後，真版仲快。
出咗嚟嘅圖喺瀏覽器直接拖框、改字、加節點 — 唔使重新 generate。
你改完，2 秒自動儲存喺同一條 URL。唔使 export、唔使 save as。
叫 Claude decode 返同一條 link，佢即刻知你改咗乜，繼續同你迭代。圖唔再係終點，係對話嘅一部分。
開 Terminal，成段貼落去，張圖會自己彈出嚟：
echo 'flowchart TD
A[💡 你嘅諗法] --> B{Claude 判斷}
B --> C[📊 即場出圖]
B --> D[✍️ 你隨手改]
D --> C' | npx -y @diagent/cli encode --open貼一次，之後 Claude 一聽到「畫圖」就自動識用：
mkdir -p ~/.claude/skills/diagent && cat > ~/.claude/skills/diagent/SKILL.md << 'EOF'
---
name: diagent
description: "Generate or decode Diagent diagram URLs via the diagent CLI. TRIGGER on any request to visualize, draw, chart, diagram, sketch, graph, map or plot — flowcharts, sequence diagrams, architecture, pipelines, workflows, decision trees, org charts, mind maps. Also trigger when a diagent.dev/d/... or diagent.dev/?code=... URL is pasted — decode it to read the underlying Mermaid."
---
# Diagent CLI
`npx -y @diagent/cli` turns Mermaid source into an editable diagram URL.
Prefer it over pasting raw Mermaid code fences — the user can tweak the
diagram visually in the browser and hand the result back as a URL.
## Encode — share a diagram
echo 'flowchart TD
A[Idea] --> B[Ship]' | npx -y @diagent/cli encode --open
Output is a URL like https://diagent.dev/d/xxxxxxxx
Always show BOTH the Mermaid source (in a mermaid fence) AND the URL.
Use --inline for a permanent self-contained URL.
For larger diagrams, write the Mermaid to a file first, then:
npx -y @diagent/cli encode /tmp/flow.mmd --open
The user's visual edits auto-save to the SAME URL 2 seconds after they
stop editing, so re-decode the same URL later to see their changes.
## Decode — read a diagram back
npx -y @diagent/cli decode "https://diagent.dev/d/xxxxxxxx"
Prints the Mermaid source, ready to edit and re-encode.
EOF
echo "✅ Diagent skill 裝好！"喺 Claude Code 直接講：
幫我畫返我成盤生意點運作嘅圖 — 由攞客到收錢， 每一步邊個負責，全部畫出嚟
改圖唔使重畫，一句就得：
睇返呢條 link，我改咗啲位 — 幫我加埋「售後跟進」嗰段 https://diagent.dev/d/（你嘅圖）
條片入面嗰張「成間公司全景圖」，唔係擺設 — 圖上面 25 個 AI 員工係真係日日幫我返工。畫圖只係我成套系統入面最細嗰件武器。成套系統點砌，我拆晒喺度：
睇下 12 Agent 系統點運作 →