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:mermaidjs-v11

Mermaid v11 diagrams

Create Mermaid v11 diagrams for architecture, APIs, data models, timelines, states, journeys, and project plans.

01

Choose diagram type

02

Structure syntax

03

Add content

04

Configure theme

Rule 01

Pick the diagram family before writing syntax

Rule 02

Keep labels concise and render-safe

Rule 03

Use Mermaid comments and frontmatter intentionally

Rule 04

For publish-grade output, validate spacing and readability

Execution Map

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

01

Start

Input, scope, route

  1. 1 Choose diagram type Map the need to flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, journey, or another v11 type.
  2. 2 Structure syntax Start with the diagram declaration and keep content valid for that diagram family.
02

Work

Agent / skill execution

  1. 3 Add content Encode actors, entities, states, tasks, arrows, labels, dates, or relationships with concise names.
  2. 4 Configure theme Use frontmatter or Mermaid config for theme, look, font, and security level when needed.
03

Verify

Gate, review, validation

  1. 5 Render or export Embed inline in Markdown/HTML or use mmdc to export SVG, PNG, or PDF.
  2. 6 Validate layout Check labels, routing, collisions, and readability; apply tech-graph spacing guidance for publishable SVGs.
04

Close

Report, handoff, artifact

  1. 7 Fix syntax errors Correct common mistakes: wrong diagram declaration, invalid arrows, bad pie values, malformed XY data, or missing participants.

Sample Prompt

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

Architecture flow Recommended 
/ak:mermaidjs-v11 flowchart for webhook ingestion pipeline
Use when:
Use when a process or architecture needs a Mermaid flowchart.
Expected:
Returns valid Mermaid v11 flowchart syntax for the webhook ingestion pipeline, ready to render.
API sequence 
/ak:mermaidjs-v11 sequence diagram for checkout and webhook confirmation
Use when:
Use when actor interactions or API calls matter.
Expected:
Returns a sequenceDiagram with named participants and request/response messages for checkout confirmation.
Data model 
/ak:mermaidjs-v11 er diagram for users orders and payments
Use when:
Use for entity relationships and database documentation.
Expected:
Returns ER diagram syntax with relationships and fields for users, orders, and payments.

Handled Scope

  • Flowcharts and decision trees
  • Sequence and API flows
  • Class and ER diagrams
  • Gantt timelines
  • State machines
  • Markdown and browser embedding

Artifacts Produced

Diagram Output

Pattern

Mermaid code block or exported SVG/PNG/PDF

A renderable Mermaid v11 diagram with the right diagram type, valid syntax, and readable layout.

Related skills

Next