{ "markdown": "# FlowForge\n\n> A Claude Code skill that turns natural language into professional draw.io diagrams — flowcharts, architecture diagrams, comparisons, and more.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n[![Version](https://img.shields.io/badge/version-1.0.0-green.svg)](CHANGELOG.md)\n[![Claude Code](https://img.shields.io/badge/Claude%20Code-Plugin-orange.svg)](https://code.claude.com)\n\n**English** | [中文](README.zh-CN.md)\n\n

\n \"LLM\n

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

\n \"Economic\n

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

\n \"PPO\n

\n\n### Decision Tree (`tree` × `mint`)\n\n

\n \"Database\n

\n\n### Hub & Spoke (`hub` × `indigo`)\n\n

\n \"Agent\n

\n\n### Timeline (`timeline` × `terracotta`)\n\n

\n \"LLM\n

\n\n### Full Index\n\n| # | Diagram | Type | Theme |\n|---|---------|------|-------|\n| 01 | Data collection pipeline | `flow-vertical` + branch | `tech-blue` |\n| 02 | Smart data query pipeline | `flow-vertical` (long, with color rhythm) | `tech-blue` |\n| 03 | Economic data platform architecture | `layers` (5 tiers) | multi-color per layer |\n| 04 | PPO vs DPO vs GRPO algorithms | `columns` (horizontal × vertical compare, with loops) | `tech-blue` + accents |\n| 05 | LLM full-stack architecture | `layers` (6 tiers + cross-cutting panel) | full palette |\n| 06 | Traditional vs AI-augmented data team | `compare` | `morandi` |\n| 07 | Database selection decision tree | `tree` | `mint` |\n| 08 | AI Agent capability hub | `hub` (6 spokes) | `indigo` |\n| 09 | LLM evolution timeline | `timeline` (alternating) | `terracotta` |\n\n> Open any `.drawio` file in [app.diagrams.net](https://app.diagrams.net) to view or edit.\n\n## Project Structure\n\n```\nflowforge-skill/\n├── .claude-plugin/\n│ └── plugin.json # Plugin metadata\n├── skills/\n│ └── FlowForge/\n│ ├── SKILL.md # Main skill instructions (entry point)\n│ ├── themes.md # 5 color theme definitions\n│ ├── xml-reference.md # XML element templates\n│ ├── examples.md # Complete reference examples\n│ └── examples/ # Reference .drawio files\n├── gallery/ # Showcase diagrams\n├── assets/screenshots/ # README screenshots\n├── README.md # English README\n├── README.zh-CN.md # 中文 README\n├── LICENSE # MIT\n└── CHANGELOG.md\n```\n\n## Design Philosophy\n\n- **Layout is deterministic** — Every diagram type has explicit coordinate formulas. No \"AI guesses positions.\"\n- **Color is semantic** — Each color maps to a meaning (primary / accent / warning / etc.). Never decorative.\n- **Restraint over decoration** — Most nodes use the dominant color family. Accent colors are scalpels, not paintbrushes.\n- **Bilingual labels** — Use the user's language naturally. Technical terms (API, LLM, RAG) stay in English.\n\n## Contributing\n\nPRs welcome! Areas where contributions are especially valuable:\n\n- New diagram type layouts (e.g., Gantt, mind map, ER diagram)\n- Additional color themes\n- Gallery examples for different domains\n- Translations (`README.{lang}.md`)\n\n## Acknowledgments\n\nBuilt following the design principles in [Lessons from Building Claude Code: How We Use Skills](https://x.com/trq212/status/2033949937936085378) by [Thariq Shihipar](https://x.com/trq212) at Anthropic.\n\n## License\n\n[MIT](LICENSE) © 2026 [winstonyoyo](https://github.com/wentong2022-arch)\n", "bytes": 8034, "sha": "0a50142d0a34a265f9996927bf1ac7d1a915603773f10a5b6219418bc4cf165e", "repo_slug": "wentong2022-arch/flowforge-skill", "fonte": "repo", "truncated": false, "api": "https://api.agentalog.com/api/listings/skl_wentong2022_arch_flowforge_skill_flowfor_663132d5/readme" }