FlowForge
A Claude Code skill that turns natural language into professional draw.io diagrams — flowcharts, architecture diagrams, comparisons, and more.
English | 中文
What is FlowForge?
FlowForge is a Claude Code skill that generates professional .drawio diagrams from natural language descriptions. Just describe what you want — a CI/CD pipeline, a system architecture, an algorithm comparison — and FlowForge produces a clean, well-laid-out draw.io XML file ready to open in draw.io desktop or app.diagrams.net.
Why draw.io XML?
- Editable — You can refine the generated diagram in any draw.io editor.
- Portable — Works in browsers, desktop apps, VS Code extensions, Confluence, etc.
- Deterministic generation — Absolute coordinates and explicit styles let Claude produce stable, predictable layouts.
Features
- 11 layout algorithms —
flow, flow-vertical, compare, layers, loop, tree, hub, columns, matrix, funnel, timeline, sequence
- 5 color themes —
tech-blue (default), morandi, mint, terracotta, indigo
- Smart color principles — Size-adaptive color budget; blue dominates with strategic accent placement to avoid the "rainbow" anti-pattern
- Orthogonal arrow routing — Clean right-angle bends, no diagonals
- Bilingual labels — Chinese / English with technical abbreviations preserved
- Sketch-first workflow — Confirms ASCII sketch with you before generating XML
Installation
Option 1: As a Claude Code Plugin (recommended)
# In Claude Code
/plugin install https://github.com/winstonyoyo/flowforge-skill
Or add to your plugin marketplace and install from there.
Option 2: Manual Skill Installation
Clone this repo and copy the skill directory to your Claude Code skills folder:
git clone https://github.com/winstonyoyo/flowforge-skill.git
cp -r flowforge-skill/skills/FlowForge ~/.claude/skills/
# Or for project-scoped:
cp -r flowforge-skill/skills/FlowForge ./.claude/skills/
Usage
In Claude Code, just describe what you want to draw:
Draw a flowchart for our user signup process
画一个 RAG 检索流程图
Compare PPO vs DPO vs GRPO algorithms
帮我画一个微服务架构图
Or use the /FlowForge slash command explicitly:
/FlowForge "OAuth 2.0 authorization code flow"
/FlowForge path/to/design-doc.md --type layers --theme morandi
Workflow
- Describe what you want
- Confirm theme (or let it default to
tech-blue)
- Review ASCII sketch — FlowForge shows the planned structure before generating XML
- Open the
.drawio file in draw.io and refine if needed
Color Themes
| Theme | Style | Best for |
|---|
tech-blue | Blue-gray + warm accents | Technical content, system docs (default) |
morandi | Muted sage + smoky purple | Design portfolios, brand decks |
mint | Mint green + warm yellow | Product flows, user journeys |
terracotta | Earthy clay + sand | Business strategy, operations |
indigo | Bold indigo + violet | Tech presentations, launches |
Diagram Types
| Type | Code | Best for |
|---|
| Linear flow | flow | Sequential steps A → B → C |
| Vertical flow | flow-vertical | Top-down processes |
| Comparison | compare | A vs B side-by-side |
| Layer stack | layers | Multi-tier architectures |
| Cycle | loop | Iterative processes (CI/CD, training loops) |
| Tree | tree | Hierarchies, taxonomies |
| Hub & spoke | hub | One core, many branches |
| Parallel columns | columns | 3+ parallel concepts |
| Matrix | matrix | Multi-dimension comparisons |
| Funnel | funnel | Filtering, conversion |
| Timeline | timeline | Version evolution |
| Sequence | sequence | Component interactions |
Gallery
9 example diagrams generated by FlowForge, covering all 5 themes and the most-used diagram types — see gallery/ for source .drawio files.
Layered Architecture (layers × tech-blue + multi-color)
Algorithm Comparison (columns + loop × tech-blue)
Decision Tree (tree × mint)
