DiaScope

What DiaScope gives you

D2 stays canonical

You author the diagram in D2 and keep narration in a sidecar .story.yaml. DiaScope never mutates your source diagram.

Step-by-step focus

Each story step highlights the relevant nodes, pans the viewport, and pairs the visual state with narration.

Self-contained output

The final artifact is a single .html file you can open locally, attach to docs, or share with clients and teammates.

Agent-friendly workflow

Agents can inspect a codebase, write the D2 diagram, generate the story file, and build the final explainer automatically.

Claude Code + Codex

Install the DiaScope narrate skill into Claude Code or Codex and use natural prompts to generate first-draft walkthroughs.

Working examples

Start from a real example, inspect the source files, and open a generated story artifact directly from this docs site.

Typical workflow

1. Author a D2 diagram and optionally mark beats with # @step comments.
2. Run diascope init to scaffold a story sidecar.
3. Fill in titles, body text, and node mappings.
4. Run diascope build to emit a single interactive HTML document.

If you want the shortest path, start with Getting Started. If you want to work through Claude Code or Codex, open AI Agents. If you want to see a realistic example first, open Compliant GPU Blueprint.