C4 context and components
Levels 1 and 3, building on the existing container diagram.
ProposedAn open skill for Claude Code, Codex CLI and Kiro CLI
Describe it in words.
See how it connects.
Turn a document, a process or a database schema into a diagram. Get editable source and a PNG, checked by a geometric gate.
Ideas, systems
and processes.
Give them a shape.
AWS architecture poster
Which services exist, and how does a request move through them?
Example: AWS architecture posteren
01
Describe
A plain-language request, a document or a DDL.
02
The gate rejects
Loose arrows, overlapping text and clipped margins.
03
Receive
Editable source and a PNG you can keep in your repository.
A diagram for the question at hand
Browse all diagrams →11 types, from the first service call to the last database relationship.
Architecture01
AWS architecture poster
Services, boundaries and the path of a request.
Process02
Numbered-step flow
The order of actions across systems.
Architecture03
C4 container diagram
People, containers and system dependencies.
Process04
Sequence diagram
Calls, responses and conditional interactions.
Process05
Swimlanes
Steps and handoffs, organized by owner.
Process06
BPMN 2.0
A formal process with an editable BPMN source.
Process07
State machine
States, events and allowed transitions.
Data08
ER diagram per schema
Tables, keys and relations within a schema.
Data09
Schema dependency matrix
Dependencies between schemas in a single matrix.
Comparison10
Comparison table
Options compared against the same criteria.
Comparison11
Cards catalog
A consistent inventory of items and their owners.
Choose a model with evidence
See all measurements →Setups with a recorded clean pass, read from docs/models/runs.json. A measured pass is not a universal ranking.
AWS architecture posterOpus 5.5, Sonnet 5.5 2/6 measured setups passed with a clean PNG
Numbered-step flowSonnet 5.5 1/6 measured setups passed with a clean PNG
Comparison tableOpus 5.5, Sonnet 5.5, Haiku 5.5 3/6 measured setups passed with a clean PNG
ER diagram per schemaOpus 5.5, Sonnet 5.5, Haiku 5.5 3/6 measured setups passed with a clean PNG
Schema dependency matrixOpus 5.5, Sonnet 5.5, Haiku 5.5 3/6 measured setups passed with a clean PNG
SwimlanesOpus 5.5, Sonnet 5.5, Haiku 5.5 3/6 measured setups passed with a clean PNG
Cards catalogOpus 5.5, Sonnet 5.5, Haiku 5.5 3/6 measured setups passed with a clean PNG
BPMN 2.0Opus 5.5, Haiku 5.5 2/6 measured setups passed with a clean PNG
Sequence diagramSonnet 5.5, Haiku 5.5 2/6 measured setups passed with a clean PNG
State machineNo clean pass yet 0/6 measured setups passed with a clean PNG
C4 container diagramOpus 5.5 1/6 measured setups passed with a clean PNG
Next on the drawing boardComing soon
Eight proposed types. None started yet.
Network and VPC
Subnets, routes, endpoints and connections, without the business flow of an AWS poster.
ProposedTimeline and roadmap
Milestones, phases and dependencies for presentation.
ProposedDDD context map
Bounded contexts and the relationships between them.
ProposedData flow diagram
Where data comes from, where it is stored and where it goes, with its classification.
ProposedUser journey
Stages, channels and friction points arranged in bands.
ProposedDecision tree
Questions, answers and outcomes for business rules and triage.
ProposedOrganization chart and RACI
Responsibility shown as a tree or a matrix.
ProposedAlready have a source file?
Explore importing →Eight input formats, using the same generators and gate.
Import commandbash
npx ai-diagrams import examples/import/en/flowchart.mmd --out diagrams/flowchart --lang enexamples/import/en/flowchart.mmdmermaid
flowchart LR
A((Request)) --> B[Check order]
B --> C{Available?}
C -->|Yes| D[Reserve]
C -->|No| E[Reject]
D --> F((Completed))
E --> F
Generated by the ai-diagrams engine
examples/import/en/output/flowchart/flowchart.html
Keep the workflow in your CLI
Install once. Describe the next diagram in the project where it belongs.
Published on npm as ai-diagrams. npx downloads it on first use.
Install in npmbash
npx ai-diagrams install --claude
# Or install the CLI globally.
npm install -g ai-diagrams
ai-diagrams install --claude
ai-diagrams doctorExpected output
The skill is installed for the selected CLI. doctor reports Python 3, Chrome and Node availability.
Use --codex or --kiro instead of --claude. For a project installation, add --project <PROJECT>.
An existing installation is never replaced without confirmation. Keep the package installed while linked skills are in use.
Source and package
Made by Vinícius Coimbra
Made by Vinícius Coimbra