mermaid-renderer

Render Mermaid diagrams to images with theme customization and Markdown integration

509 stars

bya5c-ai

View on GitHub Installation ↓

Best use case

mermaid-renderer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Render Mermaid diagrams to images with theme customization and Markdown integration

Teams using mermaid-renderer should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/mermaid-renderer/SKILL.md --create-dirs "https://raw.githubusercontent.com/a5c-ai/babysitter/main/library/specializations/software-architecture/skills/mermaid-renderer/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/mermaid-renderer/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How mermaid-renderer Compares

Feature / Agent	mermaid-renderer	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Render Mermaid diagrams to images with theme customization and Markdown integration

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Mermaid Diagram Renderer Skill

## Overview

Renders Mermaid diagram definitions to images supporting flowcharts, sequence diagrams, class diagrams, ER diagrams, and more with theme customization.

## Capabilities

- Render Mermaid to PNG, SVG, PDF formats
- Support flowcharts, sequence, class, ER, Gantt, pie, journey diagrams
- Theme customization (default, dark, forest, neutral)
- Integration with Markdown documentation
- Background color and styling options
- Puppeteer-based rendering for high quality

## Target Processes

- c4-model-documentation
- microservices-decomposition
- data-architecture-design

## Input Schema

```json
{
  "type": "object",
  "required": ["source"],
  "properties": {
    "source": {
      "type": "string",
      "description": "Mermaid diagram definition"
    },
    "outputFormat": {
      "type": "string",
      "enum": ["png", "svg", "pdf"],
      "default": "svg"
    },
    "outputPath": {
      "type": "string",
      "description": "Output file path"
    },
    "theme": {
      "type": "string",
      "enum": ["default", "dark", "forest", "neutral"],
      "default": "default"
    },
    "config": {
      "type": "object",
      "properties": {
        "backgroundColor": {
          "type": "string",
          "default": "white"
        },
        "width": {
          "type": "number"
        },
        "height": {
          "type": "number"
        }
      }
    }
  }
}
```

## Output Schema

```json
{
  "type": "object",
  "properties": {
    "outputPath": {
      "type": "string",
      "description": "Path to rendered image"
    },
    "format": {
      "type": "string"
    },
    "dimensions": {
      "type": "object",
      "properties": {
        "width": { "type": "number" },
        "height": { "type": "number" }
      }
    }
  }
}
```

## Usage Example

```javascript
{
  kind: 'skill',
  skill: {
    name: 'mermaid-renderer',
    context: {
      source: 'graph TD\n  A[Start] --> B[Process]\n  B --> C[End]',
      outputFormat: 'svg',
      outputPath: 'docs/diagrams/flow.svg',
      theme: 'default'
    }
  }
}
```

Related Skills

plantuml-renderer

509

from a5c-ai/babysitter

Render PlantUML diagrams to various image formats with theme and styling support

graphviz-renderer

509

from a5c-ai/babysitter

Render Graphviz DOT graphs to images with multiple layout algorithms

tui-test-renderer

509

from a5c-ai/babysitter

Set up testing utilities for TUI components with ink-testing-library and Bubble Tea testing.

process-builder

509

from a5c-ai/babysitter

Scaffold new babysitter process definitions following SDK patterns, proper structure, and best practices. Guides the 3-phase workflow from research to implementation.

Workflow & Productivity

babysitter

509

from a5c-ai/babysitter

Orchestrate via @babysitter. Use this skill when asked to babysit a run, orchestrate a process or whenever it is called explicitly. (babysit, babysitter, orchestrate, orchestrate a run, workflow, etc.)