agentsclimarketplace

Mermaid render

Skill aksh-3141/claude-toolshed/plugins/mermaid/skills/mermaid-render

Provide and install pre-packaged plugins to extend Claude Code with new skills directly within your Claude environment.

Install
npx -y skills add aksh-3141/claude-toolshed --skill mermaid-render

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

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Render .mmd or .md files to SVG images

SKILL.md

2.9 KB, as published. Nobody here has run it

/mermaid-render

User request: "$ARGUMENTS"

Task

Render Mermaid diagrams from an existing .mmd file or a .md file with Mermaid blocks to SVG image files.

Process

  1. Resolve Plugin Path:

    find "$HOME/.claude/plugins/cache" -type d -name "mermaid" -path "*/skills/mermaid" 2>/dev/null | head -1
    

    If empty, run fallback:

    find "$HOME" -maxdepth 8 -type d -name "mermaid" -path "*/skills/mermaid" 2>/dev/null | head -1
    

    Use the returned path as PLUGIN_DIR.

  2. Ensure Dependencies:

    bash "$PLUGIN_DIR/scripts/ensure-deps.sh"
    

    If .claude/mermaid.json does not exist, display a one-time nudge before continuing:

    First time using the mermaid plugin? Run /mermaid-config to pick a theme and output settings. Using defaults for now (zinc-light, ./diagrams).

  3. Read Config: If .claude/mermaid.json exists, read:

    • theme (default: zinc-light)
    • output_directory (default: ./diagrams)
    • output_format (default: svg)

    Resolve output path:

    • If output_directory is "same" AND an input file path is known: OUTPUT_DIR=$(dirname {input_file})
    • If output_directory is "same" AND no argument was provided: OUTPUT_DIR=./diagrams
    • Otherwise: OUTPUT_DIR=<output_directory from config>
  4. Determine Input:

    • .mmd file → render directly
    • .md file → extract Mermaid blocks first: node "$PLUGIN_DIR/scripts/extract_mermaid.js" {file}
    • Directory → find all .mmd files: find {dir} -name "*.mmd" -not -path "*/node_modules/*"
    • No argument → ask: "Which file or directory should I render?"
  5. Render: Run for each input file. resilient_diagram.js renders SVG via beautiful-mermaid and maps errors to troubleshooting.md.

    Theme handling:

    • If theme == "custom" and themeVariables is present in config:

      node "$PLUGIN_DIR/scripts/resilient_diagram.js" {input_file} --output-dir $OUTPUT_DIR --custom-theme '{"bg":"#...","fg":"#..."}'
      

      Pass the serialized themeVariables JSON as the --custom-theme value.

    • If theme == "custom" but themeVariables is absent from config: render without custom theme and display a note:

      Custom theme configured but no themeVariables found — run /mermaid-config → option 6 to define colors.

    • Otherwise:

      node "$PLUGIN_DIR/scripts/resilient_diagram.js" {input_file} --output-dir $OUTPUT_DIR --theme {theme}
      
  6. Report:

    • List all output files generated with full paths
    • If rendering failed: "Run /mermaid-config → health check to diagnose missing dependencies."

Output

Rendered 3 diagrams:
  ✅ diagrams/sequence-auth.svg
  ✅ diagrams/er-users.svg
  ✅ diagrams/architecture.svg

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.