Mermaid renderer

Skill a5c-ai/babysitter/library/specializations/software-architecture/skills/mermaid-renderer

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

Install

npx -y skills add a5c-ai/babysitter --skill mermaid-renderer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Render Mermaid diagrams to images with theme customization and Markdown integration

SKILL.md

2.4 KB, as published. Nobody here has run it

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