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:tech-graph

Publish-Grade SVG/PNG Diagrams

Generates and validates production-quality architecture, data flow, flowchart, sequence, agent/memory, UML, network, timeline, matrix, and concept diagrams across seven visual styles.

01

Classify diagram

02

Extract structure

03

Plan layout

04

Load style

Rule 01

Diagram type determines layout rules

Rule 02

Arrow colors must carry semantic meaning

Rule 03

Every arrow label needs a background and safe distance

Rule 04

Syntax validation is necessary but not visual proof

Execution Map

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

01

Start

Input, scope, route

  1. 1 Classify diagram Choose architecture, data flow, flowchart, agent, memory, sequence, UML, ER, network, timeline, matrix, or concept-map layout rules.
  2. 2 Extract structure Identify layers, nodes, edges, flows, semantic groups, data types, lifelines, states, or entities from the request.
  3. 3 Plan layout Apply diagram-specific spacing, grid, viewBox, grouping, arrow direction, and label rules before writing SVG.
02

Work

Agent / skill execution

  1. 4 Load style Use style 1 flat icon by default or load the requested numbered style reference for exact tokens and SVG patterns.
  2. 5 Map visuals Map users, LLMs, agents, memory, tools, APIs, queues, files, decisions, and data to the documented shape vocabulary.
  3. 6 Route arrows Assign arrow semantics, add legends for two or more flow types, route around nodes, and use jump-over arcs for crossings.
03

Verify

Gate, review, validation

  1. 7 Write SVG Use helper scripts or the mandatory Python list method, with defs, markers, embedded fonts, label backgrounds, and complete closing tags.
  2. 8 Validate and export Run rsvg-convert syntax validation, export a 1920px PNG, then inspect for collisions, overflow, label issues, and clutter.
  3. 9 Report paths Return the SVG and PNG paths plus any visual limitations if the self-review could not be performed.

Syntax, arguments, subcommands

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

Syntax

/ak:tech-graph [diagram-type or system description]

Arguments

[diagram-type or system description]

Diagram brief

Names the desired diagram type or describes the system, flow, architecture, memory model, UML structure, network, timeline, matrix, or concept map to render as publish-grade SVG and PNG.

/ak:tech-graph architecture diagram for the auth service

Sample Prompt

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

Architecture diagram Recommended 
/ak:tech-graph draw the payment service architecture
Use when:
A publish-grade system architecture diagram is needed.
Expected:
Classifies the layout, writes SVG, validates it, exports PNG, and reports both paths.
Agent memory flow 
/ak:tech-graph visualize agent memory write and read paths
Use when:
The diagram must separate memory writes, reads, retrieval, and context assembly.
Expected:
Uses memory architecture rules, semantic arrows, separated read/write paths, and a clear legend.
Sequence diagram 
/ak:tech-graph sequence diagram for checkout authorization
Use when:
A time-ordered interaction between participants should be illustrated.
Expected:
Uses lifelines, activation boxes, ordered messages, and optional loop or alt frames when needed.

Handled Scope

  • architecture diagrams
  • agent memory diagrams
  • UML and ER
  • SVG validation
  • PNG export
  • visual self-review

Next