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

Marketing Kit

/ak:tech-graph

Publish-grade SVG/PNG diagrams

Publish-grade SVG + PNG technical diagrams for architecture, data flow, sequence, memory, UML, topology, and concept maps.

01

Classify

02

Extract

03

Layout

04

Style

Rule 01

Publish-grade diagrams need both valid SVG and clean rendered geometry.

Rule 02

Diagram type determines layout; do not reuse one generic box-and-arrow pattern.

Rule 03

Arrow meaning, label backgrounds, and legends are part of the deliverable, not polish.

Rule 04

Prefer helper scripts/templates for complex diagrams; use direct SVG only when control is worth it.

Execution Map

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

01

Start

Input, scope, route

  1. 1 Classify Choose the diagram family: architecture, data flow, flowchart, sequence, agent/memory, UML, ER, topology, timeline, matrix, or concept map.
  2. 2 Extract Identify layers, nodes, edges, flows, semantic groups, data categories, and required labels from the user's system description.
02

Work

Agent / skill execution

  1. 3 Layout Apply the matching layout rules: lifelines for sequence, horizontal layers for architecture, radial branches for mind maps, rows/columns for matrices.
  2. 4 Style Load style 1 by default or the requested numbered style reference; use exact colors, SVG patterns, fonts, and shape vocabulary.
03

Verify

Gate, review, validation

  1. 5 Route Assign arrow semantics, route from component edges, add legends for 2+ arrow types, and prevent line crossings with jump-over arcs.
  2. 6 Generate Use helper scripts for complex diagrams or the mandatory Python-list method for direct SVG generation to avoid truncation and syntax mistakes.
04

Close

Report, handoff, artifact

  1. 7 Validate Run rsvg-convert syntax validation, check text fit, label backgrounds, marker references, tag balance, and route collisions.
  2. 8 Export Export a 1920px PNG alongside the SVG, optionally inspect the rendered image, revise visual collisions, then report both paths.

Output / publish flags

Only flags that change the artifact or publish it. Not the full option set.

--output /path/

Custom artifact destination

Write the generated SVG and PNG under an approved custom path instead of the current directory.

Example

/ak:tech-graph Draw a data-flow diagram --output ./docs/diagrams/

Special Operations

Rendered review

If image reading is available, inspect the exported PNG because valid SVG can still have crossed arrows, overlapping boxes, or hidden labels.

Style matrix

Load the style-to-diagram matrix when a requested style may not fit the selected diagram type.

Template fallback

For complex layouts, use generator templates with node ids so routing can snap to edges instead of center-to-center lines.

Sample Prompt

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

Architecture diagram Recommended 
/ak:tech-graph architecture diagram for a RAG pipeline
Use when:
Use for a publish-ready system architecture image.
Expected:
SVG and PNG files with layered components, routed arrows, labels, and legend.
Sequence diagram 
/ak:tech-graph sequence diagram of checkout payment flow
Use when:
Use for time-ordered interactions between participants.
Expected:
Participant lifelines, message arrows, activation boxes, and correctly scaled height for the described interaction.
Concept map 
/ak:tech-graph concept map for agent memory types
Use when:
Use when relationships are conceptual rather than procedural.
Expected:
Radial or branch-based SVG with clean labels, curved connections, and balanced spacing between concepts.

Handled Scope

  • Architecture and deployment diagrams
  • Agent and memory flows
  • UML class/use-case/state/ER diagrams
  • Sequence diagrams and process flows
  • SVG validation and PNG export

Artifacts Produced

Diagram assets

Pattern

derived-name.svg + derived-name.png

Final response reports generated SVG and PNG paths after validation/export.

Related skills

Next