# Mermaid

> |

- **Type:** Skill
- **Install:** `agentstack add skill-wyattjoh-skills-mermaid`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [wyattjoh](https://agentstack.voostack.com/s/wyattjoh)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [wyattjoh](https://github.com/wyattjoh)
- **Source:** https://github.com/wyattjoh/skills/tree/main/skills/mermaid

## Install

```sh
agentstack add skill-wyattjoh-skills-mermaid
```

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

## About

# Mermaid Diagram Renderer

Validate Mermaid syntax, then generate interactive HTML diagrams and open them in the browser. Rendering always validates first and exits without creating HTML when the syntax is invalid.

## Quick Start

Pipe mermaid code to the render script:

```bash
echo 'flowchart TD
  A[Start] --> B{Decision}
  B -->|Yes| C[OK]
  B -->|No| D[Cancel]' | bun $SKILL_DIR/scripts/render.ts
```

### Options

| Flag             | Description                                           |
| ---------------- | ----------------------------------------------------- |
| `--theme ` | Mermaid theme: `default`, `dark`, `forest`, `neutral` |
| `--no-open`      | Write HTML file without opening in browser            |

The renderer validates Mermaid syntax before writing or opening the HTML file. Invalid input produces a JSON validation report and a nonzero exit code.

### Examples

```bash
# Dark theme
echo '...' | bun $SKILL_DIR/scripts/render.ts --theme dark

# Write file only (no browser)
echo '...' | bun $SKILL_DIR/scripts/render.ts --no-open
```

## Validate Mermaid Syntax

Use [`scripts/validate.ts`](scripts/validate.ts) when syntax validation is needed without rendering. It accepts explicit Mermaid or Markdown file paths, or reads Mermaid or Markdown from stdin when no paths are supplied.

```bash
# Validate Mermaid source from stdin
echo 'flowchart TD
  A --> B' | bun $SKILL_DIR/scripts/validate.ts

# Validate Mermaid fences in Markdown
bun $SKILL_DIR/scripts/validate.ts README.md docs/architecture.md

# Validate a Mermaid file
bun $SKILL_DIR/scripts/validate.ts diagram.mmd
```

The validator writes JSON containing overall validity, detected input files, source types, diagrams, source line ranges, detected diagram types, and normalized errors with line and column locations. It exits `0` when every detected diagram is valid and `1` for syntax or input errors. Markdown files without Mermaid fences are valid and report no diagrams.

## Critical Syntax Rules

**NEVER use literal newlines inside node labels.** Mermaid's parser is line-based — a node definition must be on a single line. Use `` for line breaks within labels.

```mermaid
%% ❌ WRONG — causes "Syntax error in text"
SWR1["Fresh
30 min"]

%% ✅ CORRECT
SWR1["Fresh30 min"]
```

## Mermaid Syntax Quick Reference

### Flowchart

```mermaid
flowchart TD
  A[Rectangle] --> B(Rounded)
  B --> C{Diamond}
  C -->|One| D[Result 1]
  C -->|Two| E[Result 2]
```

Direction: `TD` (top-down), `LR` (left-right), `BT` (bottom-top), `RL` (right-left)

### Sequence Diagram

```mermaid
sequenceDiagram
  participant A as Alice
  participant B as Bob
  A->>B: Hello
  B-->>A: Hi back
  A->>B: Request
  Note over A,B: Shared note
```

### Class Diagram

```mermaid
classDiagram
  class Animal {
    +String name
    +makeSound() void
  }
  Animal  Idle
  Idle --> Processing : start
  Processing --> Done : finish
  Done --> [*]
```

### Entity Relationship

```mermaid
erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains
  PRODUCT ||--o{ LINE-ITEM : "is in"
```

### Gantt Chart

```mermaid
gantt
  title Project Plan
  dateFormat YYYY-MM-DD
  section Phase 1
    Task A :a1, 2024-01-01, 30d
    Task B :after a1, 20d
```

### Pie Chart

```mermaid
pie title Distribution
  "A" : 40
  "B" : 35
  "C" : 25
```

### Git Graph

```mermaid
gitGraph
  commit
  branch feature
  checkout feature
  commit
  commit
  checkout main
  merge feature
```

### Mindmap

```mermaid
mindmap
  root((Central))
    Topic A
      Subtopic 1
      Subtopic 2
    Topic B
      Subtopic 3
```

### Timeline

```mermaid
timeline
  title History
  2020 : Event A
  2021 : Event B
       : Event C
  2022 : Event D
```

## Source & license

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

- **Author:** [wyattjoh](https://github.com/wyattjoh)
- **Source:** [wyattjoh/skills](https://github.com/wyattjoh/skills)
- **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-wyattjoh-skills-mermaid
- Seller: https://agentstack.voostack.com/s/wyattjoh
- 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%.