VividKit Crystal clear AI coding
VI
Choose Your Setup Get Started with AgentKit Continue with ClaudeKit Migrate from ClaudeKit to AgentKit Clean cutover from ClaudeKit What Is AgentKit? How AgentKit Works AgentKit Kits, Skills, Agents & Hooks AgentKit Runtime Support AgentKit Desktop App AgentKit Configuration AgentKit CLI Quick Reference AgentKit Skills Cheatsheet AgentKit Workflows AgentKit Statusline Update AgentKit CLI & Kits AgentKit Helper Clean reinstall of AgentKit AgentKit Troubleshooting What is ClaudeKit? ClaudeKit CLI Guide Command Finder Commands Cheat Sheet Workflow Recipes CLI Quick Reference Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Other coding tools How ClaudeKit Works Inside ClaudeKit Finding Your Unknowns Session Recovery Fix from Logs UI/UX Guide Accounts Switcher IDE Config Remote Control Codex App System Diagramming UI Review Gate Promotions Support VividKit

Quick Ref / Command

Engineer Kit

/ak:excalidraw

Editable Excalidraw diagrams

Create editable Excalidraw architecture, data-flow, workflow, and codebase maps through live MCP canvas or file-based rendering.

01

Detect Backend

02

Assess Depth

03

Map Visual Patterns

04

Plan Layout

Rule 01

Diagrams should argue, not merely display labeled boxes.

Rule 02

Remove all text as a test: the structure should still communicate the concept.

Rule 03

Default to free-floating text; containers must earn their keep.

Rule 04

Each major concept should use a different visual pattern.

Rule 05

Visual validation is part of the work, not a final courtesy.

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

01

Start

Input, scope, route

  1. 1 Detect Backend Test MCP canvas first with the Excalidraw guide; fall back to .excalidraw JSON plus Playwright rendering when MCP is unavailable.
  2. 2 Assess Depth Decide simple conceptual versus comprehensive technical; for technical diagrams, research real specs, events, APIs, and evidence first.
  3. 3 Map Visual Patterns Translate concept behavior to visual grammar: fan-out, convergence, tree, timeline, cycle, cloud, assembly line, side-by-side, or phase break.
02

Work

Agent / skill execution

  1. 4 Plan Layout Guide the eye left-to-right or top-to-bottom, reserve whitespace for importance, and avoid uniform card grids.
  2. 5 Apply Semantics Use colors by role, shapes by meaning, free-floating text by default, and containers only when shape adds information.
  3. 6 Auto-Map if Asked For repo diagrams, detect project/framework, discover components, map connections, verify with the user, then cap at 12 components and 20 arrows.
03

Verify

Gate, review, validation

  1. 7 Generate Canvas Use the active MCP or file workflow with roughness 0, opacity 100, monospace fontFamily 3, and generous spacing.
  2. 8 Self-Critique Loop Render or screenshot, audit against the vision, fix overlaps/clipping/misrouted arrows, and repeat until clean.
  3. 9 Deliver Editable Output Return the canvas or .excalidraw file plus PNG/SVG exports when requested and call out evidence for technical diagrams.

Syntax, arguments, subcommands

How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.

Syntax

/ak:excalidraw [diagram description|path] [--export <png|svg>] [--live]

Arguments

[diagram description|path]

Description or path

Optional natural-language diagram request or a path to an existing .excalidraw file. Omit it only when continuing an already open live canvas.

/ak:excalidraw draw our queue-based ingestion architecture

Shared options

--export <png|svg>

Export format

Write a PNG or SVG snapshot in addition to the editable Excalidraw source or live canvas. Export is review output, not a replacement for the editable diagram.

/ak:excalidraw visualize the onboarding workflow --export png
--live

Live MCP canvas

Prefer the live Excalidraw MCP canvas when that backend is available. If the canvas probe fails, fall back to .excalidraw JSON plus Playwright rendering.

/ak:excalidraw draw our queue-based ingestion architecture --live

Modes / Routes

--export png|svg

Static export

Research:
file-workflow
Review:
Check clipping and routing
Validate:
PNG or SVG written
--live

MCP canvas

Research:
mcp-workflow
Review:
Max 2 self-critique iterations
Validate:
Live canvas screenshot

Special Operations

Isomorphism test

If removing the text makes the diagram meaningless, the visual structure is not doing enough work.

Container test

If a boxed element could work as free-floating text, remove the box.

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

Architecture canvas Recommended 
/ak:excalidraw draw our queue-based ingestion architecture --live
Use when:
The user needs an editable live architecture canvas, not a static editorial render.
Expected:
Probes the live MCP canvas first, researches concrete components and events for the technical diagram, maps those facts into visual patterns, then renders and repairs the editable Excalidraw canvas.
Auto repo map 
/ak:excalidraw diagram this repo
Use when:
The request is zero-config codebase visualization.
Expected:
Detects the project/framework, discovers components and connections within the tool-call limits, asks only for an unresolved material layout decision, then generates an overview capped at 12 components and 20 arrows.
Workflow PNG export 
/ak:excalidraw visualize the onboarding workflow --export png
Use when:
A workflow needs an editable diagram plus a PNG snapshot for review.
Expected:
Chooses a timeline, cycle, or phase-break structure instead of uniform cards, creates the Excalidraw source or canvas, visually checks clipping and arrow routing, then writes the requested PNG export.
SVG export 
/ak:excalidraw visualize the onboarding workflow --export svg
Use when:
The same workflow needs a vector snapshot rather than a raster PNG.
Expected:
Keeps the editable Excalidraw source, visually checks overlaps, spacing, and arrow routing, then writes an SVG export for review without replacing the editable diagram.

Handled Scope

  • MCP live canvas editing and file-based .excalidraw generation
  • Architecture, workflow, data-flow, and system-design diagrams
  • Zero-config codebase auto-diagramming
  • Semantic color, shape, and spacing systems
  • Visual QA for overlaps, clipping, routing, balance, and export quality

Related skills

Next