Turn your docs into a deck people will love
Your coding agent reads your docs or code and writes one interactive HTML file: a map with a guided tour, tabs and personas. Present it, edit it, send it to anyone.
No terminal? Attach your docs in Claude, ChatGPT or Gemini instead, and share the deck as a link from Claude.
claude plugin install blueprint-deck --marketplace lukasvecerka23/blueprint-deck-kitRun it in your terminal, then type /blueprint-deck in Claude Code or paste the prompt from the configurator.
codex plugin marketplace add lukasvecerka23/blueprint-deck-kit && codex plugin add blueprint-deck@blueprint-deck-kitRun it in your terminal: it adds the marketplace and installs the plugin (also for the ChatGPT desktop app). Then ask Codex for a deck.
gemini skills install https://github.com/lukasvecerka23/blueprint-deck-kit --path plugins/blueprint-deck/skills/blueprint-deckGemini CLI's own skill installer. Then start gemini in your project folder and ask for a Blueprint Deck.
Upload it unchanged: Claude under Customize → Skills, ChatGPT on the web under Plugins → Skills, Gemini (its own zip) under Customize → Skills. The ChatGPT desktop app takes the plugin from the Codex tab.
curl -fsSL https://blueprintdeck.dev/install.sh | shirm https://blueprintdeck.dev/install.ps1 | iexThe install script (macOS/Linux, then Windows): installs for Claude Code, Codex, Gemini CLI and other Agent Skills agents it finds, and asks which. All options.
Free forever, MIT License No account, no tracking Runs on your own agent subscription Nothing else to install
Live demo, the real file. Click a box, try the tabs, start the tour and use ← →, or press E to edit. Open full screen
How it works
From docs to deck in four steps
The agent writes only the content (a JSON block). The engine is fixed, so every deck looks and behaves the same, and anyone can fix a text later without the agent.
- 1
Install the skill
From inside your agent: a plugin in Claude Code or Codex, Gemini CLI's installer, or upload it to the Claude, ChatGPT or Gemini app. Nothing else to install.
claude plugin install blueprint-deck --marketplace lukasvecerka23/blueprint-deck-kit - 2
Describe your diagram
Pick the audience, viewpoint, map detail, personas, tabs and tour story in the configurator, then copy the prompt. It carries the whole config.
- 3
Paste it into your agent
In your project folder, or in a chat with your docs attached (Claude, ChatGPT, Gemini). The agent reads them, proposes the structure, and writes the deck plus an extraction report.
/blueprint-deck diagrams/diagram.config.yaml - 4
Present, edit, share
Open the file and present it. Press E to fix things, ask the agent for bigger changes, then send the file, a read-only copy, or a link: host it, or publish it as an artifact in Claude.
←→EP
Features
A presentation, a map and a document in one file
Built from real presentation rounds: each feature exists because a presenter or a reviewer asked for it.
- Architecture blueprints
- Product blueprints
- Service maps
- Data flows
- Processes
- Customer journeys
- Ecosystems
- Org maps
A guided tour
Present it like slides with ← →. Each step zooms to the part of the map it talks about; roadmaps and option sheets fit right in.
Tabs and persona paths
Each tab highlights one question, like the request path or governance. Personas can stand on the map next to the apps they use; click one to see its numbered path.
Edit it, send it read-only
Press E to change texts, colours, boxes, tabs and the tour, with no agent and no rebuild. Send a read-only copy when people shouldn't change it.
One file, opens anywhere
A single offline HTML file: email it, host it, open it on a phone. It makes no network requests, so it's safe to open. Several diagrams in one file, and P for a PDF deck.
Your brand, your audience
Light and dark themes, your colours and logo. A product view for executives or a technical view for engineers.
From docs or code, by any agent
Works with Claude Code, Codex and other agents. It reads your docs or your codebase; every box links to its source, and a report lists conflicts and gaps.
Install
One command, then ask your agent
The skill is a folder: SKILL.md, the engine, the format reference and the style guide. Install it from inside your agent, upload it to the Claude, ChatGPT or Gemini app, or use the install script for any other agent. It only copies files.
- Claude Code, Codex, Gemini CLI, the Claude, ChatGPT and Gemini apps, and other Agent Skills agents
- Your agent runs locally with your own subscription
- Updates through your agent, or re-run the install script
claude plugin install blueprint-deck --marketplace lukasvecerka23/blueprint-deck-kitRun it in your terminal: it adds this repository as a plugin marketplace and installs the plugin. Or inside Claude Code:
/plugin install blueprint-deck --marketplace lukasvecerka23/blueprint-deck-kitNeeds Claude Code 2.1.275 or later (older: /plugin marketplace add lukasvecerka23/blueprint-deck-kit, then /plugin install blueprint-deck@blueprint-deck-kit). Then type /blueprint-deck or paste the prompt from the configurator. Updates: turn on auto-update under /plugin → Marketplaces, or run claude plugin update blueprint-deck@blueprint-deck-kit.
codex plugin marketplace add lukasvecerka23/blueprint-deck-kit && codex plugin add blueprint-deck@blueprint-deck-kitRun it in your terminal: it adds this repository as a plugin marketplace and installs Blueprint Deck. The plugin also appears in the ChatGPT desktop app. Updates: codex plugin marketplace upgrade. Or, inside Codex, its own skill installer (installs from main, doesn't update later):
$skill-installer install https://github.com/lukasvecerka23/blueprint-deck-kit/tree/main/plugins/blueprint-deck/skills/blueprint-deckgemini skills install https://github.com/lukasvecerka23/blueprint-deck-kit --path plugins/blueprint-deck/skills/blueprint-deckGemini CLI's own skill installer, straight from GitHub. Check with /skills list. Or with the script, into ~/.gemini/skills:
curl -fsSL https://blueprintdeck.dev/install.sh | sh -s -- --agent gemini$installer = irm "https://blueprintdeck.dev/install.ps1"; & ([scriptblock]::Create($installer)) -Agent gemini- Claude (web and desktop app, paid plans): Customize → Skills → upload the zip, turn it on. Code execution must be on.
- ChatGPT on the web (paid plans): Plugins → Skills → Create → Upload the zip.
- ChatGPT desktop app: no upload; it takes plugins. Install the Codex plugin (Codex tab), or in the app: Plugins → add the marketplace
lukasvecerka23/blueprint-deck-kit, then install Blueprint Deck. - Gemini (web and desktop app): Customize → Skills → upload the Gemini zip (the same skill without the optional Node tools, which the Gemini app doesn't accept).
- Then attach your docs to a chat and ask for a Blueprint Deck. In a chat the skill only sees the files you attach, and you get the HTML file to download. Details.
curl -fsSL https://blueprintdeck.dev/install.sh | shirm https://blueprintdeck.dev/install.ps1 | iexThe install script, for macOS/Linux and for Windows PowerShell. It installs the latest release for the agents it finds (~/.claude/skills, ~/.codex/skills, ~/.gemini/skills, ~/.agents/skills) and asks which when there are several. Options: --agent claude|codex|gemini|agents|all, --dir <skills folder> for any other agent, --project (into the current project), --version 2.1.0, --yes, --uninstall; pass them with sh -s -- (PowerShell: -Agent, -Version …). Run it again to update. It only copies files. Read the shell or PowerShell script. Agents without skill support can follow blueprint-deck/SKILL.md as instructions: tell them to read it first.
blueprint-deck/ ·all versionsunzip blueprint-deck-skill.zip -d ~/.claude/skillsUnzip into your agent's skills folder, e.g. ~/.claude/skills/, ~/.codex/skills/, ~/.agents/skills/, or .claude/skills/ inside a repository. The result is …/skills/blueprint-deck/SKILL.md.
Examples
See what an agent makes of real docs and code
FAQ
Questions
Do I need to install anything else?
No. The skill is a folder of instructions, the engine and references; installing it only copies files. Your agent writes the diagram, and the result is a plain HTML file that opens in any browser. No runtime, build tool or account is needed. (If Node happens to be installed, the agent also runs an optional check script with it.)
Where does my content go?
Nowhere. Your agent runs locally in your project folder with your own subscription, and it reads only the sources your config lists. The generated file makes no network requests: no CDN, no fonts, no analytics. It works offline and from file://.
Can I edit the diagram without the agent?
Yes. Open the file and press E: edit texts, colours, theme and logo, move boxes, and change tabs, tour steps and personas. In Chrome and Edge the changes are saved into the file itself; in other browsers they are kept in the browser and you download the updated file. For bigger changes, ask the agent ("add a persona for the support team").
Can I share it?
It's one HTML file: email it, put it in a shared drive or attach it to a ticket. For a link anyone can open, ask Claude to publish it as an artifact (Claude Desktop or claude.ai), or upload it to any static host (Cloudflare Pages, GitHub Pages, Netlify, an S3 bucket). Press P for a PDF deck when someone needs slides.
Which agents does it work with?
Claude Code and Codex (as a plugin), Gemini CLI, the Claude, ChatGPT and Gemini apps (upload the skill as a zip; the ChatGPT desktop app takes the plugin), and any other agent that supports Agent Skills (a folder with a SKILL.md; the install script puts it into its skills folder). Agents without skill support can still follow SKILL.md as plain instructions: point them at the file.
Can I use it without a terminal or a repository?
Yes. Upload the skill once to Claude (Desktop or claude.ai), ChatGPT on the web or Gemini (a zip, see Chat apps), then start a chat, attach your docs (PDF, Markdown, text) and ask for a Blueprint Deck. You get the HTML file to download; in Claude you can also ask it to publish the deck as an artifact and share the link.
Can it build a diagram from code?
Yes. Point it at a codebase and it draws the system: services, APIs, data stores, queues and external services, with connections taken from the code itself (RPC and HTTP clients, message topics, connection strings, deployment manifests), each box citing its files. The technical viewpoint suits it best; add the README or docs too for the purpose and the story. See the Online Boutique example in the gallery.
Can I send a diagram that people can't change?
Yes. Open it and choose ⋯ → Download a read-only copy. You name the file, and the copy has the same diagram, tour and PDF export but no editor. Your own file stays editable; after changes, download a new copy.
Will an email filter block the HTML file?
It can. Many mail systems (Outlook / Microsoft 365 especially) block .html attachments in general, because they are a common phishing trick. Share a link instead: host the deck on any static host, or put it in SharePoint, OneDrive, Google Drive or Teams. A zipped file or a PDF (press P) also works.
More in the docs FAQ.
Describe your diagram in two minutes
The configurator turns your answers into a prompt for your agent. It runs in your browser; nothing is sent anywhere.
Free forever. If it saves you time, sponsor the project