2 images made by this skill from examples/order-service and examples/rag-pipeline
About this skill
Describe your system or point your agent at the repo. It finds the services, stores and queues, lays them out automatically and draws a blueprint-style sheet with labelled requests, flowing events and moving data-flow dots, as HTML, SVG and PNG.
What Lookbook adds on top of dagrejs/dagre: The blueprint drawing style, node shapes, data-flow animation, repo-reading steps and export. Credits and licences for the open-source software and fonts it uses are in NOTICE.md inside the download.
Example request
Read this repo and draw a Blueprint architecture diagram of the order service, with data flow animated.
Similar Skills
View all
What you get
- A procedure for finding services, stores and connections in a repo
- An animated HTML diagram, a still SVG and a 2x PNG
- Automatic layout with eight node shapes, groups and a title block
- A checker that catches broken edges and labels over their limit
- Open-source licenses for every part it builds on
Good fit
- Developer tools
Not for
- Detailed UML, sequence or entity diagrams
- Hand-placed layouts where every box has a fixed position
Compatibility
Runs in
Generates with
Last tested Oct 19, 2026 in Claude Code, Codex, Cursor. Commercial use of everything you make is included.
Reviews
No reviews yet. People who install this skill can leave the first one.
FAQ
Which agents can run Blueprint Architecture Diagram?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Tell us within 7 days of buying and we’ll fix it or refund you.