diagrams

Generate technical diagrams in Mermaid, PlantUML, D2, and Graphviz formats.

Updated Feb 17, 2026

Search Tags:#architecture #documentation #mermaid #diagrams #d2 #plantuml #graphviz

Ready to run

npx skills add https://github.com/ribeec20/vista-marketplace --skill diagrams

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: diagrams
Source: https://github.com/ribeec20/vista-marketplace/tree/main/vista/skills/diagrams
Command: npx skills add https://github.com/ribeec20/vista-marketplace --skill diagrams

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill transforms complex technical concepts and code structures into easily understandable visual diagrams, eliminating the need for manual drawing tools and improving clarity in documentation and communication.

Core Features & Use Cases

Diagram Generation: Create diagrams for architecture, flows, schemas, and more using various formats like Mermaid, PlantUML, D2, and Graphviz.
Format Support: Supports Mermaid (.mmd), PlantUML (.puml), D2 (.d2), Graphviz (.dot), Draw.io (.drawio), and Markdown (.md) for comprehensive documentation.
Use Case: When documenting a new microservice, use this Skill to generate a C4 context diagram showing its place in the system, a container diagram illustrating its components (API, database), and a sequence diagram for its core API calls.

Quick Start

Use the diagrams skill to create a Mermaid flowchart for the user login process.

Frequently Asked Questions about diagrams

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

FAQPage Schema

How do I generate Mermaid diagrams for code architecture from text?▼

You can generate Mermaid diagrams by writing textual descriptions that define code architecture, API flows, or state machines, which the tool then renders into visual diagrams. This diagram-as-code approach keeps your documentation maintainable and version-controlled.

What is diagram-as-code and when do I need it for system design?▼

Diagram-as-code is the practice of defining technical diagrams using text-based syntax instead of manual drawing tools. You need it for system design when you want maintainable, version-controlled documentation that tracks architecture changes directly alongside your codebase.

Can I use PlantUML and D2 formats in the same documentation workflow?▼

Yes, you can use PlantUML and D2 formats in the same documentation workflow alongside Mermaid and Graphviz. Multi-format support lets you select the optimal syntax for specific use cases, such as PlantUML for sequence diagrams and D2 for architecture visualization.

What's the best way to visualize database schemas and API flows?▼

The best way to visualize database schemas and API flows is using diagram-as-code formats like Mermaid, PlantUML, or Graphviz. These tools transform structural code concepts into clear visual diagrams, eliminating manual drawing while improving clarity in technical documentation.

Does diagram-as-code work for documenting microservices and C4 context diagrams?▼

Yes, diagram-as-code works effectively for documenting microservices and generating C4 context diagrams. You can visualize a microservice's system placement, illustrate container components like APIs and databases, and map core API calls using sequence diagrams.