← Dev blogDiagramCraft →
DiagramCraft · New Feature

Your diagrams,
guided.

Replayable Archetypes turn any complex diagram into a self-guided tour. Press play. Watch the canvas navigate itself. Understand everything — at your own pace.

Try DiagramCraft ↗About SCIENCE →
The problem it solves

Dense diagrams deserve
better onboarding.

A complex architecture diagram built over weeks of co-working sessions is intimidating to anyone opening it for the first time. Replayable Archetypes let the diagram explain itself — navigating scopes, drilling into elements, surfacing connections, and narrating what matters — so new team members get the full picture without a synchronous walkthrough.

01
Build the diagram
Collaborate with an LLM via MCP to design your system architecture, process flow, or knowledge model inside DiagramCraft.
02
Attach a tour
An LLM reads the finished diagram and calls create_archetype + add_archetype_to_diagram to attach a step-by-step guided tour as a replayable archetype.
03
Press ▶ to begin
A large play button appears on the tour anchor element. Workspace members — even view-only — can press it to launch the tour independently.
04
The canvas navigates itself
Steps auto-navigate scopes, drill into elements, return via breadcrumbs, and surface rich explanatory content. The viewer follows along — or minimizes and explores freely.
05
Replay anytime
Pressing play always restarts from step 1. Each workspace member has their own session state. The tour never wears out.
06
Stop or resume
While running, the play button becomes a stop button. Close the tab mid-tour and your place is saved. Come back and pick up exactly where you left off.
Everything you'd expect,
nothing new to learn.
Per-user session state
Each workspace member's progress is independent. One person finishing doesn't affect anyone else.
Stop / resume anywhere
Minimize the coach card to explore the diagram freely. Your place is always saved on exit.
Viewer-safe tours
Purely presentational tours are available to view-only workspace members — no editor rights required.
Existing tutorial UX
Same coach card, same Auto-complete, Skip, and End tutorial controls. No new interface to learn.
Rich content slides
Steps can include full-screen GFM markdown with rendered Mermaid diagrams as slides.
Branch & detour paths
Optional deep dives via branch and detour steps — viewers choose their own level of depth.
Auto-navigation
scope_navigated, drilled_down, and breadcrumb steps run automatically — the canvas moves for you.
LLM-authored via MCP
An LLM that built your diagram can author and attach its own guided tour in the same session.
Use cases

Built for guided tours.
Useful everywhere else too.

The primary design is presentation and onboarding, but the replay semantics unlock value across any archetype that benefits from running more than once.

🗺
Architecture Onboarding
A new team member joins a workspace. The guided tour navigates them through every layer of the system — what each service does, how they connect, and what the team has learned — in 10 minutes flat.
🎯
Client Demos
Share a workspace with a client. They press play and get a self-paced walkthrough of the proposed architecture, design decisions, and next steps — without you needing to be on a call.
🔁
Repeatable Operations
Functional archetypes with select_target_elements steps can be replayed against different elements each time — apply the same transformation to a fresh selection without creating a new diagram instance.
📋
Status Reviews
A recurring diagram review archetype that walks stakeholders through project status, highlighting updated elements and surfacing key decisions — replayable for every sprint cycle.
🎓
Educational Content
Build a diagram that teaches a concept — how OAuth works, what a microservices architecture looks like, how a database schema evolves — and let learners replay it as many times as they need.
⚙
Process Documentation
Model a business process or engineering workflow. Attach a guided tour that walks any team member through each stage with explanations, decisions, and ownership — living documentation that explains itself.
AI authoring

The LLM that built
your diagram can
give it a voice.

After a co-working session that builds a complex diagram via MCP, the same LLM can read the finished structure and produce a full guided tour — calling create_archetype and add_archetype_to_diagram in one pass.

The tour author knows the diagram better than anyone. No human has to write the tour steps manually.

Tutorial Import · JSON
{"replayable": true,"isArchetype": true,"hasMutations": false,"baseDiagram": {"name": "Guided Tour","description": "Press ▶ to begin."},"steps": [// rich_content welcome slide// scope_navigated "" → root// standard spotlight → explain// drilled_down → child scope// rich_content deep explanation// detour → optional deep dive// scope_navigated "" → return]}
DiagramCraft

Ready to give your
diagrams a voice?

Replayable Archetypes are part of DiagramCraft's growing archetype engine — the same system that scaffolds full working projects, runs live scripts, and integrates with Claude and Gemini via MCP.

Try DiagramCraft free ↗Talk to us →