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/wentong2022-arch/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/wentong2022-arch/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

1. Describe what you want
2. Confirm theme (or let it default to tech-blue)
3. Review ASCII sketch — FlowForge shows the planned structure before generating XML
4. 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