mermaid-diagram

Generate Mermaid diagrams with Japanese text handling from structured prompts.

Updated Sep 4, 2022
One-click install
npx skills add https://github.com/yt3trees/dotfiles --skill mermaid-diagram-yt3trees
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mermaid-diagram
Source: https://github.com/yt3trees/dotfiles/tree/main/.gemini/skills/mermaid-diagram
Command: npx skills add https://github.com/yt3trees/dotfiles --skill mermaid-diagram-yt3trees

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies creating Mermaid diagrams while ensuring proper handling of Japanese text to prevent rendering errors and misinterpretation.

Core Features & Use Cases

  • Supports multiple diagram types: Flowchart, Sequence Diagram, Class Diagram, ER Diagram, and Gantt Chart generation.
  • Japanese text handling: Enforces correct quoting and simple node IDs to ensure reliable rendering with Japanese labels.
  • Error prevention and validation: Provides guidelines for valid diagram syntax, arrow usage, and ID conventions, reducing common mistakes during diagram authoring.
  • Use Case: When documenting workflows, create consistent diagrams directly from prompts or data inputs with minimal back-and-forth.

Quick Start

Use mermaid-diagram to render a simple diagram, for example: flowchart TD A["Start"] --> B["Process"] --> C["End"]

Frequently Asked Questions about mermaid-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix Mermaid diagram rendering errors with Japanese text?

Mermaid diagram rendering errors with Japanese text occur when labels lack proper double quotes or use invalid node IDs. Enforcing simple node IDs and wrapping Japanese text in double quotes ensures error-free diagram generation across all supported types.

What types of Mermaid diagrams can I generate from structured prompts?

You can generate Flowchart, Sequence Diagram, Class Diagram, ER Diagram, and Gantt Chart types from structured prompts or data inputs. The automation applies valid diagram syntax and proper arrow formats to produce accurate visual outputs.

How do I create a Mermaid flowchart with correct syntax and arrows?

To create a Mermaid flowchart, apply valid diagram syntax, simple node IDs, and proper arrow formats. Using double quotes for text labels ensures valid rendering, preventing common mistakes during diagram authoring.

Why does my Mermaid sequence diagram fail to render?

A Mermaid sequence diagram fails to render due to invalid syntax, incorrect arrow usage, or improper ID conventions. Following guidelines for valid diagram syntax and ensuring text labels are double-quoted prevents these common rendering failures.

Can I use Mermaid for documenting workflows with Japanese labels?

Yes, you can use Mermaid for documenting workflows with Japanese labels by enforcing correct quoting and simple node IDs. This ensures reliable rendering and consistent diagrams directly from prompts or data inputs with minimal back-and-forth.

What is the best way to automate ER diagram generation without syntax errors?

The best way to automate ER diagram generation without syntax errors is applying rules for valid IDs, arrow usage, and double-quoted labels. This prevents common mistakes and produces error-free renders from structured data inputs.