diagram-generator

Generate architecture, database, and system diagrams using Mermaid syntax.

36|6|Updated Nov 2, 2025
One-click install
npx skills add https://github.com/oimiragieo/LLM-RULES --skill diagram-generator-oimiragieo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: diagram-generator
Source: https://github.com/oimiragieo/LLM-RULES/tree/main/.claude/skills/diagram-generator
Command: npx skills add https://github.com/oimiragieo/LLM-RULES --skill diagram-generator-oimiragieo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts system structure and data relationships into clear Mermaid diagrams for easier understanding and communication.

Core Features & Use Cases

  • Architecture diagrams: Visualize system components and interactions
  • Database diagrams: Diagram schemas and relationships
  • Component diagrams: Show inter-component relationships
  • Sequence diagrams: Capture flows and events

Quick Start

Generate architecture diagram for the authentication system

Frequently Asked Questions about diagram-generator

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

FAQPage Schema
How do I generate architecture diagrams with Mermaid syntax?

Mermaid diagram generation converts system structure into visual architecture diagrams. Provide component names, relationships, and data flows as input; the Skill outputs clear, labeled Mermaid syntax ready for documentation or embedding in Markdown files.

Can I create database schema diagrams using Mermaid?

Database diagram generation supports erDiagram syntax to visualize schema relationships and entity connections. Input your table structure and relationships; output is a readable Mermaid diagram showing cardinality and field associations.

What types of diagrams can Mermaid generate for system documentation?

Mermaid supports architecture, database (erDiagram), component, and sequence diagrams. Each type visualizes different aspects: components and interactions, schema relationships, inter-component dependencies, and event flows respectively.

How do I visualize data flows and component interactions in my system?

Sequence and component diagrams capture data flows and inter-component relationships using Mermaid syntax. Define actors, messages, or components as input; the Skill produces labeled diagrams showing communication patterns and dependencies.

Can I embed generated Mermaid diagrams directly in Markdown documentation?

Yes, Mermaid diagrams output in syntax that embeds seamlessly in Markdown. The generated diagrams render natively in Markdown documentation platforms, eliminating separate image file management.

What's the best way to document system architecture visually for development and operations teams?

Architecture diagrams generated with Mermaid provide clear, version-controlled system visualizations. They support labeled nodes and edges, making component relationships and data flows understandable across development, operations, and documentation workflows.