Practiced before published

We use the skill before we recommend it.

Community signals find candidates. Source review and rendered results decide what stays.

See the collection Open editor

curation-loop.mmdrender · review · refine

skills curated

our skills forward-tested

community pick

Current review batch, verified August 28, 2026. Popularity is a discovery signal, not an acceptance rule.

Focused skills, separated by source

Our repeatable Mermaid workflows live in one collection; independently maintained community picks live in another.

Four focused skills distilled from Mermaid2Img and real technical publishing work, then validated one by one.

Mermaid2Img practicerequirement → diagram · rendered

mermaid2img/mermaid-skills

mermaid-diagram-builder

Use it when you have requirements, prose, or code but no Mermaid diagram yet.

What it does: It chooses an appropriate diagram type, extracts supported nodes and relationships, and labels unknowns instead of inventing missing system details.
How we tested it: We gave it a password-reset requirement with success and expired-token branches. The resulting flow rendered successfully without invented infrastructure.

Install path

npx skills add mermaid2img/mermaid-skills --skill mermaid-diagram-builder

Source path

skills/mermaid-diagram-builder/SKILL.md

Source code

Mermaid2Img practiceboundaries + failures · reviewed

mermaid2img/mermaid-skills

mermaid-architecture-review

Use it when you need to understand how a system works and where its permissions or risks sit.

What it does: It maps system boundaries, data ownership, tool reads and writes, approval gates, normal paths, and failure paths while separating observed facts from inference.
How we tested it: We reviewed the local editor-to-export path, preserved its parser-failure loop, and kept remote publishing behind an explicit approval boundary.

Install path

npx skills add mermaid2img/mermaid-skills --skill mermaid-architecture-review

Source path

skills/mermaid-architecture-review/SKILL.md

Source code

Mermaid2Img practicemobile before/after · compared

mermaid2img/mermaid-skills

mermaid-preview-refinement

Use it when Mermaid renders, but the diagram is too wide, crowded, or hard to read on the target screen.

What it does: It renders the current draft, inspects readability, then changes direction, labels, grouping, or diagram structure before adding decoration.
How we tested it: At 390px, we changed an unreadable horizontal strip into a grouped top-down flow while preserving both decision outcomes.

Install path

npx skills add mermaid2img/mermaid-skills --skill mermaid-preview-refinement

Source path

skills/mermaid-preview-refinement/SKILL.md

Source code

Mermaid2Img practicemulti-target delivery · practiced

mermaid2img/mermaid-skills

mermaid-publishing

Use it after the diagram is ready and must go into documentation, an article, slides, or print.

What it does: It chooses Mermaid source, SVG, PNG, or PDF for the destination and checks version support, sharpness, background, and source-to-asset consistency.
How we tested it: For one mobile-article case, we previewed at 390px, checked source/asset revision consistency, and completed a local 2x PNG export.

Install path

npx skills add mermaid2img/mermaid-skills --skill mermaid-publishing

Source path

skills/mermaid-publishing/SKILL.md

Source code

Community pick4.8K installs · source reviewed

softaworks/agent-toolkit

mermaid-diagrams

Use it when you need a quick reference for choosing a Mermaid diagram type or writing unfamiliar syntax.

What it does: It explains common diagram types, syntax patterns, and mistakes so the agent is less likely to invent unsupported Mermaid.
How we tested it: We reviewed the complete installed package and confirmed it works as a self-contained selection and syntax reference; we did not treat popularity alone as proof.

Install path

npx skills add https://github.com/softaworks/agent-toolkit --skill mermaid-diagrams

Source path

skills/mermaid-diagrams/SKILL.md

How a candidate earns a place

We look for evidence from people, inspect what actually runs, then use the skill on a real diagram.

Community need

Issues, discussions, and practitioner feedback must point to a real problem the skill solves.

Complete source

Instructions, referenced files, dependencies, and executable behavior must all be inspectable.

Isolated trial

Community skills are installed in a temporary location before any recommendation is made.

Rendered result

For visual skills, the output must be previewed and judged at the viewport it is meant to serve.

Popular candidates we did not publish

Not every exclusion is a bad project. It means the current package did not meet this hub's install-and-use bar.

design-doc-mermaid

High installs, but the downloaded skill references scripts and folders that are absent from the package.

beautiful-mermaid

Promising renderer, but its helper can install a package automatically during execution, so it needs clearer consent boundaries.

A valid diagram can still be a poor diagram.

Render it at the real viewport, fix the largest structural problem, and compare again.

Practice in the editor