diagramming

Generate Mermaid diagrams for architecture, sequences, ERDs, flowcharts, and state machines.

564|70|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/ynulihao/AgentSkillOS --skill diagramming-ynulihao
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: diagramming
Source: https://github.com/ynulihao/AgentSkillOS/tree/main/data/skill_seeds/diagramming
Command: npx skills add https://github.com/ynulihao/AgentSkillOS --skill diagramming-ynulihao

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the creation of technical diagrams, making complex system designs, data flows, and processes easy to understand and maintain.

Core Features & Use Cases

  • Mermaid Syntax: Generates various diagram types (architecture, sequence, ERD, flowchart, state) using Mermaid.
  • Code-based Diagrams: Allows for version-controlled, maintainable diagrams directly from code.
  • Use Case: Documenting a new microservice architecture by creating a C4 context diagram and a sequence diagram for a key user flow.

Quick Start

Use the diagramming skill to create a Mermaid sequence diagram illustrating a basic request flow.

Frequently Asked Questions about diagramming

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

FAQPage Schema
How do I generate Mermaid sequence diagrams for visualizing system request flows?

You can generate ERDs and flowcharts by providing system design logic to produce version-controlled Mermaid syntax. This approach outputs maintainable diagrams that simplify tracking data models and processes directly from code.

Can I create C4 context diagrams and state machines using Mermaid syntax?

Yes, you can create C4 context diagrams and state machines using Mermaid syntax. The tool facilitates visualizing component architectures and state transitions to clearly document complex system designs and processes.

What is the best way to maintain version-controlled architecture diagrams for microservices?

The best way to maintain version-controlled architecture diagrams is using code-based Mermaid syntax. This method allows you to document microservice architectures directly in your repository, ensuring designs remain synchronized with code changes.

Does this diagramming approach support documenting state transitions and component diagrams?

Yes, this diagramming approach supports documenting state transitions and component diagrams. It generates various technical diagram types using Mermaid syntax, facilitating the visualization of state machines and system components for clear documentation.