Flowchart Creator

mhattingpete/claude-skills-marketplace/visual-documentation-plugin/skills/flowchart-creator

作者 mhattingpeteb5b34bcf4c920bb72cee1c391b54a33cb5353c12無授權條款收錄於 2026年10月9日更新於 2026年10月9日

Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.

僅含說明Design & Creative
AI 產生的概覽

建立互動式 HTML 流程圖與流程圖表，包含決策菱形、顏色編碼節點、箭頭以及選用的泳道。

功能
此技能提供產生內含 SVG 流程圖之獨立 HTML 檔案的指示。它定義節點類型（開始/結束圓角矩形、處理方塊、決策菱形）、配色配置、箭頭連接線、選用泳道，以及逐步版面配置流程。輸出會寫入 [process]-flowchart.html 檔案。
適用情境
當使用者要求流程圖、流程圖表、工作流程視覺化或決策樹時使用。它適合將一連串步驟或分支邏輯視覺化為圖表的請求。
執行需求
不隨附指令碼，僅為指示文件。依賴代理撰寫 HTML 與 SVG 的能力，以及隨附的範本與參考檔案。不需要認證或網路存取。

Flowchart Creator

Create interactive HTML flowcharts and process diagrams.

When to Use

  • "Create flowchart for [process]"
  • "Generate process flow diagram"
  • "Make decision tree for [workflow]"
  • "Show workflow visualization"

Components

  1. Start/End nodes: rounded rectangles (#48bb78 green, #e53e3e red)
  2. Process boxes: rectangles (#4299e1 blue)
  3. Decision diamonds: diamonds (#f59e0b orange)
  4. Arrows: connecting paths with labels
  5. Swimlanes: grouped sections (optional)

HTML Structure

html
<!DOCTYPE html><html><head>  <title>[Process] Flowchart</title>  <style>    body { font-family: system-ui; }    svg { max-width: 100%; }    .start-end { fill: #48bb78; }    .process { fill: #4299e1; }    .decision { fill: #f59e0b; }  </style></head><body>  <h1>[Process Name] Flowchart</h1>  <svg viewBox="0 0 800 600">    <!-- flowchart nodes and connectors -->  </svg></body></html>

Node Patterns

html
<!-- Start/End (rounded rect) --><rect x="350" y="50" width="100" height="50" rx="25" class="start-end"/><text x="400" y="80" text-anchor="middle">Start</text>
<!-- Process box --><rect x="350" y="150" width="100" height="60" class="process"/><text x="400" y="185" text-anchor="middle">Process</text>
<!-- Decision diamond --><path d="M400,250 L450,280 L400,310 L350,280 Z" class="decision"/><text x="400" y="285" text-anchor="middle">Decision?</text>
<!-- Arrow --><path d="M400,100 L400,150" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>

Workflow

  1. Break down process into steps
  2. Identify decision points
  3. Layout nodes vertically or horizontally
  4. Connect with arrows
  5. Add labels to decision branches
  6. Write to [process]-flowchart.html

Keep layout clean, use consistent spacing (100px between nodes).

來源與署名

來源：mhattingpete/claude-skills-marketplace位於visual-documentation-plugin/skills/flowchart-creator提交b5b34bc

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 mhattingpete/claude-skills-marketplace 的技能

Codebase Documenter

mhattingpete

產生 Markdown 文件，說明程式碼庫的架構、元件、資料流與開發規範。

Software Development2026年10月9日

更多Design & Creative技能

Theme Factory

anthropics

精選

提供 10 套預設配色與字型主題，並可即時產生新主題，為簡報、文件、報告與 HTML 頁面統一風格。

Design & Creative180K今天更新

Slack Gif Creator

anthropics

精選

為 Slack 製作尺寸與檔案大小經過最佳化的動畫 GIF，並提供 PIL 繪圖輔助、緩動函式與驗證工具。

包含腳本
Design & Creative180K今天更新

Frontend Design

anthropics

精選

在建立或改造使用者介面時，提供打造獨特、有意識視覺設計的指引。

Design & Creative180K今天更新

Canvas Design

anthropics

精選

依照寫好的設計理念創作原創視覺藝術，輸出 PNG 或 PDF，適合海報、藝術作品等靜態成品。

Design & Creative180K今天更新

Brand Guidelines

anthropics

精選

將 Anthropic 官方品牌配色與字體套用到需要呈現 Anthropic 外觀風格的各類成品上。

Design & Creative180K今天更新

Frontend Design

anthropics

精選

指導代理為新介面或改版介面進行獨特、有意的視覺設計。

Design & Creative149K今天更新