Mermaid Renderer

Documents

mermaid-renderer

Mermaid Renderer is an Agent Skill for documents published in the a5c-ai/babysitter repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

Render Mermaid diagrams to images with theme customization and Markdown integration

View on GitHub ↗

QUICK START

How to use this skill

Bring this guide into your coding agent with a prompt tailored to the tool you use.

Open your project in Codex.
Copy and paste the prompt below.
Review files and risks before approving any action.

Prompt to paste

Inspect the Agent Skill at https://github.com/a5c-ai/babysitter/blob/HEAD/library/specializations/software-architecture/skills/mermaid-renderer/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/mermaid-renderer, but wait for my approval before writing files or running scripts.

Copying this prompt does not install or run the skill. Review third-party files before use.

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

{
  "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

{
  "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

{
  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'
    }
  }
}