Topics

#ai-tools #architecture-diagrams #claude-skill #developer-tools #diagram #drawio #flowchart #visualization

Language breakdown

No language data available.

▸ Files click to expand

README

FlowForge

A Claude Code skill that turns natural language into professional draw.io diagrams — flowcharts, architecture diagrams, comparisons, and more.

English | 中文

LLM Full-Stack Architecture — generated by FlowForge

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

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)

Economic Data Platform Architecture

Algorithm Comparison (`columns` + loop × `tech-blue`)

PPO vs DPO vs GRPO

Decision Tree (`tree` × `mint`)

Database Selection Decision Tree

Hub & Spoke (`hub` × `indigo`)

Agent Capabilities Hub

Timeline (`timeline` × `terracotta`)

LLM Evolution Timeline

Full Index

| # | Diagram | Type | Theme | |---|---------|------|-------| | 01 | Data collection pipeline | flow-vertical + branch | tech-blue | | 02 | Smart data query pipeline | flow-vertical (long, with color rhythm) | tech-blue | | 03 | Economic data platform architecture | layers (5 tiers) | multi-color per layer | | 04 | PPO vs DPO vs GRPO algorithms | columns (horizontal × vertical compare, with loops) | tech-blue + accents | | 05 | LLM full-stack architecture | layers (6 tiers + cross-cutting panel) | full palette | | 06 | Traditional vs AI-augmented data team | compare | morandi | | 07 | Database selection decision tree | tree | mint | | 08 | AI Agent capability hub | hub (6 spokes) | indigo | | 09 | LLM evolution timeline | timeline (alternating) | terracotta |

Open any .drawio file in app.diagrams.net to view or edit.

Project Structure

flowforge-skill/
├── .claude-plugin/
│   └── plugin.json           # Plugin metadata
├── skills/
│   └── FlowForge/
│       ├── SKILL.md          # Main skill instructions (entry point)
│       ├── themes.md         # 5 color theme definitions
│       ├── xml-reference.md  # XML element templates
│       ├── examples.md       # Complete reference examples
│       └── examples/         # Reference .drawio files
├── gallery/                  # Showcase diagrams
├── assets/screenshots/       # README screenshots
├── README.md                 # English README
├── README.zh-CN.md           # 中文 README
├── LICENSE                   # MIT
└── CHANGELOG.md

Design Philosophy

Layout is deterministic — Every diagram type has explicit coordinate formulas. No "AI guesses positions."
Color is semantic — Each color maps to a meaning (primary / accent / warning / etc.). Never decorative.
Restraint over decoration — Most nodes use the dominant color family. Accent colors are scalpels, not paintbrushes.
Bilingual labels — Use the user's language naturally. Technical terms (API, LLM, RAG) stay in English.