# Diagramming

Create technical diagrams using Mermaid syntax for architecture, sequences, ERDs...

- Repository: https://github.com/ynulihao/AgentSkillOS (618 stars)
- Category: Design
- License: see repository
- Last updated: 2026-03-07
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add ynulihao/AgentSkillOS --skill diagramming -g -a claude-code -y`
Codex: `npx skills add ynulihao/AgentSkillOS --skill diagramming -g -a codex -y`
Cursor: `npx skills add ynulihao/AgentSkillOS --skill diagramming -g -a cursor -y`
Gemini CLI: `npx skills add ynulihao/AgentSkillOS --skill diagramming -g -a gemini-cli -y`

## Description

Create technical diagrams using Mermaid syntax for architecture, sequences, ERDs, flowcharts, and state machines. Use for visualizing system design, data flows, and processes. Triggers: diagram, mermaid, architecture diagram, sequence diagram, flowchart, ERD, entity relationship, state diagram, C4 model, component diagram, visualize, draw.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Diagramming

## Overview

Create clear, maintainable technical diagrams using Mermaid syntax. This skill covers architecture diagrams, sequence diagrams, entity-relationship diagrams, flowcharts, and state diagrams for documenting software systems.

## Instructions

### 1. Choose the Right Diagram Type

| Diagram Type    | Use When                                |
| --------------- | --------------------------------------- |
| Architecture/C4 | Showing system structure and components |
| Sequence        | Showing interactions over time          |
| ERD             | Showing data models and relationships   |
| Flowchart       | Showing decision logic and processes    |
| State           | Showing state transitions               |

### 2. General Mermaid Principles

- Keep diagrams focused on one concept
- Use consistent naming conventions
- Add descriptive labels to relationships
- Limit complexity (split large diagrams)
- Use comments for documentation

## Best Practices

- **Simplicity**: One diagram, one concept
- **Consistency**: Same naming across related diagrams
- **Readability**: Left-to-right or top-to-bottom flow
- **Labels**: Always label relationships and transitions
- **Context**: Include a title and brief description

## Examples

### Architecture Diagrams (C4 Model)

#### Context Diagram (Level 1)

```mermaid
C4Context
    title System Context Diagram for E-Commerce Platform

    Person(customer, "Customer", "A user who purchases products")
    Person(admin, "Admin", "Manages products and orders")

    System(ecommerce, "E-Commerce Platform", "Allows customers to browse and purchase products")

    System_Ext(payment, "Payment Gateway", "Handles payment processing")
    System_Ext(shipping, "Shipping Provider", "Handles order fulfillment")
    System_Ext(email, "Email Service", "Sends notifications")

The rest: https://github.com/ynulihao/AgentSkillOS/blob/HEAD/data/skill_seeds/diagramming/SKILL.md