mermaid-fix — community mermaid-fix, k8s-agent, community, ide skills, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for AI Agents needing advanced Mermaid diagram parsing and validation capabilities in k8s environments a k8s env management by AI agent

jinbangyi jinbangyi
[0]
[0]
Updated: 3/5/2026

Agent Capability Analysis

The mermaid-fix skill by jinbangyi is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance.

Ideal Agent Persona

Perfect for AI Agents needing advanced Mermaid diagram parsing and validation capabilities in k8s environments

Core Value

Empowers agents to automatically fix Mermaid diagram parsing errors using mermaid-cli, discovering new rules and updating known patterns in .claude/rules/mermaid.md, while validating syntax with mmdc

Capabilities Granted for mermaid-fix

Automating Mermaid diagram validation
Debugging syntax errors in Mermaid code blocks
Updating mermaid.md rules with newly discovered patterns

! Prerequisites & Limits

  • Requires mermaid-cli installation
  • k8s environment management capabilities
  • Filesystem access to read and update .claude/rules/mermaid.md
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

mermaid-fix

Install mermaid-fix, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

Mermaid Fix

Fixes Mermaid diagram parsing errors using mermaid-cli and discovers new rules.

Quick Start

  1. Read existing rules: Load .claude/rules/mermaid.md for known patterns
  2. Extract diagrams: Find all Mermaid code blocks in the target file(s)
  3. Validate with mmdc: Run mmdc -i <temp_file> -o /dev/null to check syntax
  4. Fix errors: Apply fixes based on mmdc error output
  5. Update rules: Add newly discovered error patterns to mermaid.md

Validation Command

bash
1# Create temp file, validate, check exit code 2mmdc -t neutral -i diagram.mmd -o /dev/null 3# Exit code 0 = valid, non-zero = error

Common Fixes

Based on existing rules in mermaid.md:

Error PatternFix
Graph TDChange to lowercase: graph TD
<br/>, <b>, <i> in labelsRemove HTML tags, use plain text
dmzSubnet style namingUse hyphens: dmz-subnet
Missing graph directionAdd LR, TD, RL, or BT

Discovering New Rules

When you encounter a new error pattern:

  1. Document the error: Capture the error message from mmdc
  2. Identify the fix: What change resolved the error?
  3. Update mermaid.md: Add a new rule entry with:
    • Rule number (next sequential)
    • Category name
    • Pattern description
    • Fix/avoidance guidance

Example new rule format:

markdown
1**N. Category Name** 2- Error pattern: `<what causes the error>` 3- Fix: `<how to resolve>` 4- Example: `<before -> after>`

Workflow Steps

Quick Mode (Markdown Files with Multiple Diagrams)

For markdown files containing multiple Mermaid diagrams, use concurrent validation:

bash
1# Validate all diagrams in a markdown file concurrently (4 workers by default) 2python3 .claude/skills/mermaid-fix/scripts/validate_markdown_mermaid.py <path/to/file.md> 3 4# Specify number of parallel workers 5python3 .claude/skills/mermaid-fix/scripts/validate_markdown_mermaid.py <path/to/file.md> --workers 8

Step-by-Step Mode

  1. Read the target file(s) containing Mermaid diagrams
  2. For each diagram:
    • Extract the Mermaid code block
    • Write to a temporary .mmd file
    • Run mmdc to validate
    • If error: fix based on error message and known rules
    • If new pattern: document for mermaid.md update
  3. Replace fixed diagrams in source file(s)
  4. If new patterns were discovered, update .claude/rules/mermaid.md

Constraints

  • Preserve the diagram's semantic meaning
  • Only fix syntax/structure issues
  • Do not "optimize" or "improve" the visual design (use /optimize-mermaid for that)
  • Test each fix with mmdc before applying

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is mermaid-fix?

Perfect for AI Agents needing advanced Mermaid diagram parsing and validation capabilities in k8s environments a k8s env management by AI agent

How do I install mermaid-fix?

Run the command: npx killer-skills add jinbangyi/k8s-agent/mermaid-fix. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for mermaid-fix?

Key use cases include: Automating Mermaid diagram validation, Debugging syntax errors in Mermaid code blocks, Updating mermaid.md rules with newly discovered patterns.

Which IDEs are compatible with mermaid-fix?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for mermaid-fix?

Requires mermaid-cli installation. k8s environment management capabilities. Filesystem access to read and update .claude/rules/mermaid.md.

How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add jinbangyi/k8s-agent/mermaid-fix. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use mermaid-fix immediately in the current project.

Related Skills

Looking for an alternative to mermaid-fix or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

149.6k
0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

138.4k
0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

72.8k
0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

72.8k
0
AI