diagrams

Generate system architecture, process flow, and data relationship diagrams from textual descriptions.

3|Updated May 3, 2026
One-click install
npx skills add https://github.com/chloebrett/slay --skill diagrams-chloebrett
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: diagrams
Source: https://github.com/chloebrett/slay/tree/main/.claude/skills/diagrams
Command: npx skills add https://github.com/chloebrett/slay --skill diagrams-chloebrett

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mermaid, plantuml, graphviz, vega-lite, canvas, and includes references (resource) and scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill helps users generate diagrams and visual representations of complex systems, making technical documentation and communication more effective.

Core Features & Use Cases

  • Diagram Types: Supports flowcharts, sequence diagrams, ER diagrams, component architectures, state machines, and more.
  • Format Support: Uses Mermaid, PlantUML, Graphviz, Vega-Lite, and JSON Canvas to create visuals in Markdown.
  • Use Case: For example, visualize a microservices architecture in a documentation project by designing a clear architecture diagram with layers and components.

Quick Start

Create a sequence diagram showing user login flow using Mermaid syntax in your Markdown file.

Frequently Asked Questions about diagrams

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate system architecture diagrams from text in Markdown?

Yes, you can visualize microservices architecture by designing a clear architecture diagram with layers and components. This Skill supports diagram generation for component architectures, process flows, and data relationships directly within technical documentation.

What diagram types are supported for workflow visualization?

Supported diagram types for workflow visualization include flowcharts, sequence diagrams, entity-relationship (ER) diagrams, component architectures, state machines, and data relationships. These cover technical documentation, engineering design, and process flow scenarios.

Does this diagram generation tool work with Vega-Lite and JSON Canvas?

Yes, this diagram generation tool works with Vega-Lite and JSON Canvas. It requires Mermaid, PlantUML, Graphviz, Vega-Lite, and JSON Canvas to produce diagrams, ensuring broad format support for various visualization scenarios.

What's the best way to create a sequence diagram for a user login flow?

The best way to create a sequence diagram for a user login flow is using Mermaid syntax in your Markdown file. This approach allows you to quickly generate process flow visuals by translating simplified textual descriptions into professional diagrams.

Do I need to install Graphviz and PlantUML separately to render diagrams?

Yes, Graphviz and PlantUML are required dependencies to render diagrams. The Skill explicitly needs Mermaid, PlantUML, Graphviz, Vega-Lite, and JSON Canvas to process textual descriptions and produce the final visual outputs.