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 request>

Arguments

<diagram request> Required

Diagram request

Natural-language visual outcome and evidence boundary: audience, question to answer, desired depth, output path, and whether editable source, PNG, SVG, or a live canvas is required.

/ak:excalidraw "Inspect this repository and propose an architecture overview for a new maintainer. Confirm the components and connections before drawing, then create architecture.excalidraw and architecture.png without installing software or clearing an existing canvas."

Modes / Routes

MCP Canvas

Live editing

Research:
mcp-workflow
Review:
Max 2 self-critique iterations
Validate:
Canvas screenshot
File-based

JSON + render

Research:
file-workflow
Review:
Check schema/coordinates
Validate:
Rendered PNG
Auto-diagram

Codebase map

Research:
auto-diagram-guide
Review:
12 components, 20 arrows
Validate:
User-verified plan before draw

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
Use when:
The user needs an editable architecture or system-design diagram, not a static editorial render.
Expected:
Detects live MCP versus file mode, researches concrete components and events for the technical diagram, maps those facts into visual patterns, then renders and repairs the editable Excalidraw output.
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 the user to confirm the proposed map before drawing, then generates an overview capped at 12 components and 20 arrows.
Workflow export 
/ak:excalidraw visualize the onboarding workflow and export PNG/SVG
Use when:
A workflow needs an editable diagram plus requested review/export formats.
Expected:
Chooses a timeline, cycle, or phase-break structure instead of uniform cards, creates the Excalidraw source or live canvas, visually checks clipping, overlaps, spacing, and arrow routing, then returns the requested PNG/SVG exports.

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