# Preview Mermaid

> Render and preview Mermaid diagrams in browser with support for flowcharts, sequence diagrams, class diagrams, and more

- Skill: `veelenga/preview-mermaid` (Agent Skill, multi-file: 12 files)
- Install (CLI): `npx skillmds@latest add veelenga/preview-mermaid`
- Raw SKILL.md: https://api.skillmd.com/api/skills/veelenga/preview-mermaid/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: veelenga (https://skillmd.com/u/veelenga)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/veelenga/preview-mermaid

---


# Preview Mermaid Skill

Interactive Mermaid diagram viewer that renders flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, Gantt charts, pie charts, and more.

## Agent Usage

When the user asks to preview a Mermaid diagram, **DO NOT** build HTML manually. Use the Bash tool to execute this skill's `run.sh` script:

```bash
# Preview a file
./run.sh diagram.mmd

# Pipe content
echo "graph TD
  A-->B" | ./run.sh
```

The script handles all HTML generation and **automatically opens the result in the browser**. Do NOT open the file manually to avoid duplicate tabs.

## Usage

```bash
# Preview a Mermaid diagram file
/preview-mermaid diagram.mmd

# Pipe Mermaid content (preferred for temporary content)
cat flowchart.mermaid | /preview-mermaid
echo "graph TD\n  A-->B" | /preview-mermaid

# With custom background color
/preview-mermaid sequence.mmd --background "#ffffff"
```

**Best Practice:** For temporary or generated content, prefer piping over creating temporary files. This avoids cluttering your filesystem and the content is automatically cleaned up.

## Options

The script works with sensible defaults but supports these flags for flexibility:

- `-o, --output PATH` - Custom output path
- `--no-browser` - Skip browser, output file path only

## Features

- **All diagram types** supported:
  - Flowcharts
  - Sequence diagrams
  - Class diagrams
  - State diagrams
  - ER diagrams (Entity-Relationship)
  - Gantt charts
  - Pie charts
  - Git graphs
  - User journey diagrams
  - Requirement diagrams
- **Interactive diagrams** with clickable nodes
- **Pan and zoom** for large diagrams
- **Export to SVG** functionality
- **Light/dark theme** support
- **Auto-layout** for optimal diagram rendering
- **Responsive design** adapts to screen size

## When to Use This Skill

Use this skill when the user wants to:

- Visualize flowcharts and process diagrams
- Create sequence diagrams for system interactions
- Document software architecture with class diagrams
- Design database schemas with ER diagrams
- Plan projects with Gantt charts
- Share visual documentation

## Examples

**Natural language requests:**

- "preview this flowchart"
- "show me the sequence diagram"
- "visualize the state machine"
- "render the ER diagram"
- "display the class diagram"

## Technical Details

### File Requirements

- File extensions: `.mmd`, `.mermaid`
- Maximum size: 10MB (configurable)
- Encoding: UTF-8

### Supported Diagram Types

#### Flowchart

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Process]
    B -->|No| D[End]
    C --> D
```

#### Sequence Diagram

```mermaid
sequenceDiagram
    Alice->>John: Hello John!
    John-->>Alice: Great to hear from you!
```

#### Class Diagram

```mermaid
classDiagram
    Animal <|-- Duck
    Animal : +int age
    Animal: +isMammal()
```

#### State Diagram

```mermaid
stateDiagram-v2
    [*] --> Still
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

### Features in Detail

#### Interactive Diagrams

- Click nodes to follow links
- Hover for tooltips (if defined)
- Pan by dragging
- Zoom with mouse wheel

#### Export

- One-click SVG export
- High-quality vector graphics
- Preserves all styling

#### Theme Support

- Light theme (default)
- Dark theme
- Custom themes via CSS

### Browser Compatibility

- Modern browsers (Chrome, Firefox, Safari, Edge)
- Requires JavaScript enabled
- CDN-dependent: Mermaid.js library

## Output

The skill generates a standalone HTML file at:

```
.preview-skills/mermaid/{filename}.html
```

The file is self-contained and can be:

- Opened directly in any browser
- Shared with others (requires internet for CDN assets)
- Archived for later viewing

## Troubleshooting

### Diagram doesn't render

- Check Mermaid syntax for errors
- Verify diagram type is supported
- Check browser console for JavaScript errors
- Ensure proper indentation and structure

### Syntax errors

- Use Mermaid Live Editor to validate syntax
- Check for missing arrows, brackets, or quotes
- Verify proper node ID format (no spaces in IDs)

### Layout issues

- Try different diagram orientations (TD, LR, etc.)
- Adjust node labels for better fit
- Use subgraphs to organize complex diagrams

### Export not working

- Ensure browser supports SVG download
- Check popup blockers
- Try downloading from file menu

## Development

This skill is standalone and includes all dependencies:

- Shared libraries bundled in `lib/`
- Templates bundled in `templates/`
- External CDN dependencies:
  - mermaid.js (diagram rendering)

To modify the skill:

1. Edit `config.sh` for configuration
2. Edit `templates/scripts/mermaid-renderer.js` for behavior
3. Edit `templates/styles/diagram.css` for styling
4. Run `run.sh` to test changes

## Learn More

For Mermaid syntax and examples:

- https://mermaid.js.org/
- https://mermaid.live/ (Live editor)