# Diagramming

> Creates Mermaid and ASCII diagrams for flowcharts, architecture, ERDs, state machines, mindmaps, and more. Use when user mentions diagram, flowchart, mermaid, ASCII diagram, text diagram, terminal diagram, visualize, C4, mindmap, architecture diagram, sequence diagram, ERD, or needs visual documentation.

- **Type:** Skill
- **Install:** `agentstack add skill-joaquimscosta-arkhe-claude-plugins-diagramming`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [joaquimscosta](https://agentstack.voostack.com/s/joaquimscosta)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [joaquimscosta](https://github.com/joaquimscosta)
- **Source:** https://github.com/joaquimscosta/arkhe-claude-plugins/tree/main/plugins/doc/skills/diagramming

## Install

```sh
agentstack add skill-joaquimscosta-arkhe-claude-plugins-diagramming
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Diagram Generator

Expert skill for creating clear, professional diagrams in Mermaid or ASCII format.

## Supported Formats

| Format | Best For | Trigger Keywords |
|--------|----------|------------------|
| **Mermaid** | Web docs, GitHub, rich rendering | "diagram", "mermaid", "visualize" |
| **ASCII** | Terminals, plain text, emails | "ASCII", "text diagram", "terminal" |

## Diagram Types

```
graph/flowchart     - Flowcharts and decision trees
sequenceDiagram     - API interactions and workflows
classDiagram        - Object-oriented structures
stateDiagram-v2     - State machines and transitions
erDiagram           - Database relationships
C4Context/C4Container/C4Component - Architecture views (C4 model)
mindmap             - Brainstorming and idea organization
block-beta          - System block diagrams
gantt               - Project timelines
pie                 - Data distributions
gitGraph            - Git branching strategies
journey             - User experience flows
quadrantChart       - Priority matrices
timeline            - Historical events
```

## Quick Start

1. **Determine format**: Mermaid (default) or ASCII (if user explicitly requests)
2. **Select diagram type** based on what's being visualized
3. **Choose layout**: TB/TD (top-down), LR (left-right) for Mermaid
4. **Keep readable**: Max 15-20 nodes per diagram
5. **Apply meaningful styling**: Colors/shapes with semantic meaning

## Output Format

### Mermaid (Default)

````markdown
```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]

    classDef success fill:#90EE90
    class C success
```
````

### ASCII (When Explicitly Requested)

```
+-------+     +----------+
| Start | --> | Decision |
+-------+     +----+-----+
                   |
         +---------+---------+
         |                   |
         v                   v
    +----------+       +----------+
    | Action 1 |       | Action 2 |
    +----------+       +----------+
```

**ASCII Conventions:**
- `+---+` for boxes, `|` for vertical lines, `-->` or `---` for connections
- Use consistent spacing and alignment
- Label arrows with `[text]` above the line when needed

## Diagram Type Selection

| Use Case | Recommended Type |
|----------|------------------|
| Process/decision flow | `graph` (flowchart) |
| API/service interactions | `sequenceDiagram` |
| System architecture (high-level) | `C4Context` |
| System architecture (detailed) | `C4Container`, `block-beta` |
| Database schema | `erDiagram` |
| Brainstorming/ideas | `mindmap` |
| State transitions | `stateDiagram-v2` |
| Project timeline | `gantt` |
| Feature prioritization | `quadrantChart` |

## Resources

- [WORKFLOW.md](WORKFLOW.md) - Detailed creation methodology
- [EXAMPLES.md](EXAMPLES.md) - All diagram types with real-world examples
- [TROUBLESHOOTING.md](TROUBLESHOOTING.md) - Common errors and fixes

## Integration

- **Auto-invokes** on trigger keywords (diagram, mermaid, ASCII, visualize, etc.)
- **Manual**: Use `/diagram` command
- **With docs**: Works alongside `doc-coauthoring` skill for documentation diagrams

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [joaquimscosta](https://github.com/joaquimscosta)
- **Source:** [joaquimscosta/arkhe-claude-plugins](https://github.com/joaquimscosta/arkhe-claude-plugins)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-joaquimscosta-arkhe-claude-plugins-diagramming
- Seller: https://agentstack.voostack.com/s/joaquimscosta
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.