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

Mermaid v11 diagrams

Create inline Mermaid v11 diagrams and optional SVG/PNG/PDF exports for flows, sequences, data models, timelines, states, and journeys.

01

Pick diagram family

02

Write diagram source

03

Prepare Markdown block

04

Configure appearance

Rule 01

Choose the Mermaid diagram family before writing syntax

Rule 02

Keep inline code blocks renderable in Markdown or browsers

Rule 03

Use comments, frontmatter, and config only when they improve clarity

Rule 04

For publish-grade output, render-check spacing, routing, 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 Pick diagram family Map the request to Mermaid syntax such as flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, journey, or another v11 type.
  2. 2 Write diagram source Start with the diagram declaration, then encode actors, entities, states, tasks, arrows, labels, dates, or relationships for that family.
02

Work

Agent / skill execution

  1. 3 Prepare Markdown block Wrap inline output in a mermaid code block and use %% comments or Mermaid frontmatter only when they clarify the diagram.
  2. 4 Configure appearance Set theme, look, fontFamily, or securityLevel through Mermaid config/frontmatter when the diagram needs custom rendering.
03

Verify

Gate, review, validation

  1. 5 Embed or integrate Keep the Mermaid block for Markdown/browser rendering or use the documented HTML/JavaScript integration pattern.
  2. 6 Export with mmdc When an image or document artifact is needed, convert .mmd input to SVG, PNG, or PDF with @mermaid-js/mermaid-cli.
04

Close

Report, handoff, artifact

  1. 7 Review readability Render-check labels, spacing, arrow routing, and collisions; apply tech-graph layout guidance for publish-grade SVGs.

Syntax, arguments, subcommands

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

Syntax

/ak:mermaidjs-v11 [diagram-type or description]

Arguments

[diagram-type or description] Required

Diagram request

Mermaid diagram family or natural-language description of the diagram to create. State the type when known; otherwise provide relationships, facts, output target, and constraints so the Skill can choose without inventing missing details.

/ak:mermaidjs-v11 "Create a left-to-right sequence diagram for the supplied checkout events, add accTitle and accDescr, return a fenced Mermaid block and checkout-sequence.mmd, parse it with Mermaid v11, render SVG with a pinned v11 CLI if available, and report any unverified layout."

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 an inline Mermaid diagram should explain a process or architecture.
Expected:
A paste-ready mermaid flowchart code block with valid v11 syntax, concise labels, and readable node/edge structure.
API sequence 
/ak:mermaidjs-v11 sequence diagram for checkout and webhook confirmation
Use when:
Use when actor interactions or API call order need an inline Mermaid diagram.
Expected:
A sequenceDiagram code block with participants, ordered request/response messages, and render-safe interaction labels.
Database ERD 
/ak:mermaidjs-v11 erDiagram for users orders and payments
Use when:
Use when database relationships should be documented as an inline Mermaid diagram.
Expected:
An erDiagram code block that names entities, fields, and cardinality relationships using Mermaid v11 ER syntax.
Project timeline 
/ak:mermaidjs-v11 gantt chart for beta launch milestones
Use when:
Use when milestones or project timing need a Mermaid timeline-style artifact.
Expected:
A gantt Mermaid code block with sections, tasks, dates, and dependencies that can be rendered or exported with mmdc.

Handled Scope

  • Flowcharts and decision trees
  • Sequence diagrams and API flows
  • Class and ER diagrams
  • Gantt timelines
  • State machines and user journeys
  • Markdown, HTML, and CLI exports

Artifacts Produced

Diagram output

Pattern

Inline Mermaid code block or exported SVG/PNG/PDF

A renderable Mermaid v11 diagram using the right diagram family, valid syntax, optional config, and readable layout.

Related skills

Next