Mermaid Syntax

CommunityPopular

tractorjuice

mermaid-syntax

Mermaid syntax reference for writing or fixing a diagram in an artefact: flowchart, sequence, class, state, ER, Gantt, C4, mindmap, timeline and the other diagram types, node shapes, styling, theming, and why a diagram fails to render. Not needed for PlantUML (plantuml-syntax), or when the request is for a governed diagram artefact with document control, which /arckit:diagram produces.

Overview

Publisher	tractorjuice
Repository	`arc-kit`
Skill name	`mermaid-syntax`
Stars	2.2K
Forks	280
Bundled files	31
Links	Skill source Repository Homepage

Markdown instructions
A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.
Works with any LLM
AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.
31 bundled files
Scripts, templates, and references the model can read while it works. Files are read-only and never executed.
Open source
Published by tractorjuice on GitHub. Read the source before you install it.

Installation

Install the Mermaid Syntax AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

Open the app and go to Plugins → Skills.
Choose "Install from GitHub".
Paste the skill folder URL below and confirm.
Enable the skill in any chat where you want it available.

Store

Installed

Skills

Add skills

Import one or more skills from a public GitHub folder or a local .skill or .zip archive, or SKILL.md file.

From GitHub URLFrom .skill, .zip, or SKILL.md

GitHub repo or folder

https://github.com/tractorjuice/arc-kit/tree/main/plugins/arckit-claude/skills/mermaid-syntax

Points to a single skill folder, or any folder that contains multiple skills. Public repos only.

CancelContinue

Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills

git clone --depth 1 https://github.com/tractorjuice/arc-kit.git /tmp/arc-kit
mkdir -p .claude/skills
cp -r /tmp/arc-kit/plugins/arckit-claude/skills/mermaid-syntax .claude/skills/mermaid-syntax

Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Mermaid Syntax in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Mermaid Syntax on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Mermaid Syntax is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

Loaded only when it is needed
The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.
Switch models mid-chat
Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Mermaid Syntax Reference

A comprehensive reference for all 23 Mermaid diagram types plus configuration and theming. This skill provides official Mermaid syntax documentation sourced from the mermaid-skill project (auto-synced from upstream Mermaid docs).

This skill ships reference material, not runnable scripts. Read the relevant reference file with Read, apply the syntax, and write the diagram into the user's artefact. Do not Bash-execute anything from references/ — they are Mermaid syntax docs, not commands.

To look up syntax for a specific diagram type, identify the type from the table below and read the corresponding reference file.

Supported Diagram Types

Select the appropriate diagram type and read the corresponding reference file:

Type	Reference	ArcKit Commands Using It
Flowchart	flowchart.md	`/arckit:diagram`, `/arckit:dfd`, `/arckit:roadmap`, `/arckit:plan`, `/arckit:backlog`, `/arckit:strategy`, `/arckit:story`, `/arckit:jsp-936`
Sequence Diagram	sequenceDiagram.md	`/arckit:diagram`
Class Diagram	classDiagram.md	—
State Diagram	stateDiagram.md	—
ER Diagram	entityRelationshipDiagram.md	`/arckit:data-model`
Gantt Chart	gantt.md	`/arckit:roadmap`, `/arckit:plan`, `/arckit:strategy`, `/arckit:story`, `/arckit:presentation`
Pie Chart	pie.md	`/arckit:story`, `/arckit:presentation`
Mindmap	mindmap.md	`/arckit:story`
Timeline	timeline.md	`/arckit:story`
Git Graph	gitgraph.md	—
Quadrant Chart	quadrantChart.md	`/arckit:presentation`
Requirement Diagram	requirementDiagram.md	—
C4 Diagram	c4.md	`/arckit:diagram`, `/arckit:presentation`
Sankey Diagram	sankey.md	—
XY Chart	xyChart.md	—
Block Diagram	block.md	—
Packet Diagram	packet.md	—
Kanban	kanban.md	—
Architecture Diagram	architecture.md	—
Radar Chart	radar.md	—
Treemap	treemap.md	—
User Journey	userJourney.md	—
ZenUML	zenuml.md	—

Configuration & Theming

Topic	Reference
Theming	config-theming.md
Directives	config-directives.md
Layouts	config-layouts.md
Configuration	config-configuration.md
Math	config-math.md
Tidy Tree	config-tidy-tree.md
Examples	examples.md

C4 Layout Science

For research-backed C4 diagram layout guidance (declaration ordering, edge crossing targets, colour standards, PlantUML directional hints), see c4-layout-science.md. This ArcKit-specific reference supplements the upstream C4 syntax reference with graph drawing science and layout optimisation techniques.

Common Syntax Gotchas

These are the most common Mermaid syntax errors encountered when generating diagrams:

Gotcha	Problem	Fix
`<br/>` in flowchart edge labels	Mermaid flowchart parser rejects HTML in edge labels	Use comma-separated text: `-->\|"Uses, HTTPS"\|`
`end` as node ID	`end` is a reserved keyword in Mermaid	Use a different ID: `EndNode["End"]`
Gantt date formats	Gantt requires specific date format	Use `YYYY-MM-DD` (e.g., `2025-01-15`)
Gantt task status	Invalid task status keywords	Valid: `done`, `active`, `crit`, `milestone`
Parentheses in labels	Unescaped `()` breaks node parsing	Wrap in quotes: `Node["Label (with parens)"]`
Special chars in IDs	Hyphens, dots, spaces in node IDs	Use camelCase or underscores: `apiGateway`, `api_gateway`
ER combined keys	`FK UK` (space-separated) and `PK_FK` are parse errors, and the whole block silently fails to render	Comma-separate them: `uuid tenant_id FK, UK`
ER attribute comments	An unclosed `"`, or a `"` inside the comment, breaks the block	One pair of double quotes, last on the line, no `"` inside
ER cardinality tokens	Invented tokens (e.g. `\|\|--x{`) fail to parse	Left: `\|\|` `\|o` `}o` `}\|` — right: `\|\|` `o\|` `o{` `\|{`
Subgraph naming	Subgraph IDs with spaces need quotes	`subgraph "My Group"`

ArcKit Integration

This skill handles conversational Mermaid syntax questions — quick lookups, syntax examples, troubleshooting rendering issues, and learning about diagram types.

For formal architecture diagram generation with document control, project integration, C4 layout science, and governance compliance, use the /arckit:diagram command instead. It generates versioned diagram artifacts saved to your project directory with full traceability to requirements and architecture principles.

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

references/architecture.md6 KB
references/block.md24 KB
references/c4-layout-science.md21 KB
references/c4.md31 KB
references/classDiagram.md24 KB
references/config-configuration.md2 KB
references/config-directives.md10 KB
references/config-layouts.md1 KB
references/config-math.md3 KB
references/config-theming.md15 KB
references/config-tidy-tree.md2 KB
references/entityRelationshipDiagram.md20 KB
references/examples.md8 KB
references/flowchart.md51 KB
references/gantt.md30 KB
references/gitgraph.md51 KB
references/kanban.md6 KB
references/mindmap.md9 KB
references/packet.md4 KB
references/pie.md3 KB
references/quadrantChart.md12 KB
references/radar.md8 KB
references/requirementDiagram.md10 KB
references/sankey.md8 KB
references/sequenceDiagram.md32 KB
references/stateDiagram.md16 KB
references/timeline.md15 KB
references/treemap.md9 KB
references/userJourney.md1 KB
references/xyChart.md9 KB
references/zenuml.md9 KB

Frequently asked questions

What does the Mermaid Syntax AI skill do?

Why use Mermaid Syntax on TypingMind?

Because you install it once and use it with any model. Mermaid Syntax is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Mermaid Syntax in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/tractorjuice/arc-kit/tree/main/plugins/arckit-claude/skills/mermaid-syntax. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Mermaid Syntax?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Mermaid Syntax?

As many as you like. As long as a model supports skills, you can use Mermaid Syntax with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Mermaid Syntax AI skill free?

It is published on GitHub by tractorjuice. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

To Spec

mattpocock

CommunityPopular

Turn the current conversation into a spec and publish it to the project issue tracker: no interview, just synthesis of what you've already discussed.

To Tickets

Break a plan, spec, or the current conversation into a set of tracer-bullet tickets, each declaring its blocking edges, published to the configured tracker (edges as text in one file per ticket…

Triage

Move issues and external PRs through a state machine of triage roles, categorise, verify, grill if needed, and write agent-ready briefs.

Claude Handoff

Hand the current conversation off to a fresh background agent that picks up the work immediately.

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

Mermaid Syntax Reference

Supported Diagram Types

Configuration & Theming

C4 Layout Science

Common Syntax Gotchas

ArcKit Integration

Bundled files

Frequently asked questions

Related AI Skills

Set up your own AI workspace now