Architecture Drawer — Development skill for Claude Code
Skill for Claude Code & Codex: describe your system architecture in text → get an editable PowerPoint diagram (native shapes, not a flat image).
How to install Architecture Drawer
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open Andy1314Chen/architecture-drawer and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Architecture Drawer does
Skill for Claude Code & Codex: describe your system architecture in text → get an editable PowerPoint diagram (native shapes, not a flat image).
Alternatives in Development
- Mempalace Status — Show the current state of your memory palace — wings, rooms, drawer counts, and suggestions 58.6k ★
- Frontend Slides Editable — Editable HTML presentation skill for Codex/Claude Code with drag-resize editing, slide reordering, local save/ 466 ★
- HERO Anti OverDefense — HERO = Hashing · Edge cases · Rubrics · Overbuild — the four shapes coding agents over-defend in 333 ★
README
architecture-drawer
English · [简体中文](README.zh_CN.md)
A skill for [Claude Code](https://code.claude.com), Codex, Open Code, Pi Agent, and other AI coding agents: turn a text description of your system architecture into an **editable PowerPoint architecture diagram**.

What it is
Turn **text descriptions** of an architecture into **editable PPT diagrams**: the agent generates an SVG from your description, auto-validates the layout, then exports to native PowerPoint shapes.
vs. direct image generation
| This project | Nano Banana / GPT-Image etc. | |
|---|---|---|
| Output | Editable PPT (every shape draggable, recolorable, retextable) | Flattened image |
| Control | High (code-generated, precisely adjustable) | Low (prompt-driven, hard to reproduce) |
| Iteration | Fine-tune directly in PPT | Regenerate from scratch |
| Cost | Low | High (per-image billing) |
Showcase
All diagrams below were generated entirely from text descriptions by the skill, then scored by the 13-dimension evaluator (each scored ≥76/100). They double as the regression suite under `evals/` — including the first non-architecture case (a process flowchart).
vLLM — High-Throughput LLM Inference Serving (PagedAttention)

Six-layer request pipeline (client → API server → engine → paged KV cache → execution → optimizations). Solid edges = data flow; dashed = cache/block management. *Scheme S1 Monochrome Blue.*
MLIR AI Compiler — Multi-Stream Execution Pipeline

A 4-layer × multi-column matrix (graph optimization → transformation → lowering → codegen) with vertical-fusion grouping and a concurrent multi-stream overlap timeline. *8-accent categorical palette.*
Agent Infrastructure — Layered Architecture

Five horizontal layers (application → orchestration → core capabilities → execut
Related Skills
HTML To Editable Pptx
Convert HTML slide decks to truly editable PPT / .pptx - text stays native PowerPoint textboxes, not screensho
HTML To Ppt
HTML slide deck (1920×1080) → PPTX. Two modes: editable (native PowerPoint objects) or raster (image per slide
Canvas To Code Source Shapes
Reference for the two source shapes Canvas-to-Code accepts — flat (review.html + screenshots) and iter (produc
SVG Animate
Animate an SVG — icon, logo reveal, stroke draw, morph, mascot loop — or turn a frame sequence / flat clip int
Presentation
A business question goes in. A consulting-grade deck comes out. Four composable skills for Claude Code and Cod
Waveform Resume Skill
Claude Code skill: turn a resume into a digital timing diagram - career as signal lanes, scroll-scrubbed playh
Related Agents
Omd Codex Image
Channel-aware image materializer. Reads spec blocks in HTML/MD/JSX and materializes them through Codex's nativ
Diagram Drawer
Diagram drawing specialist. Use for the drawing step of /diagram — turns a content inventory (boxes, arrows, g
Slide Critic
Design-quality grading of a slide that already passed defect QA (genslides optional polish pass, NOT a gate).