Mermaid

Name: Mermaid
Author: ulises-jeremias

ASecurity

WHAT — Mermaid diagrams from text (flowchart, sequence, class, state, ER, gantt, gitGraph) — Markdown-native, Git-native, MIT. Primary renderer for architecture pack; renders via GitHub native or mermaid CLI (mmdc) to SVG/PNG.

19 stars
0 votes
0 copies
15 views
Added September 2, 2026

ai-agentsawsgit

Works with

Security analysis

A100/100

Scanned September 2, 2026

npx -y skills add ulises-jeremias/agent-toolkit --skill mermaid --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Mermaid?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/ulises-jeremias-mermaid/badge)](https://www.skillsdirectory.com/skills/ulises-jeremias-mermaid)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

---
name: mermaid
description: WHAT — Mermaid diagrams from text (flowchart, sequence, class, state, ER, gantt, gitGraph) — Markdown-native, Git-native, MIT. Primary renderer for architecture pack; renders via GitHub native or mermaid CLI (mmdc) to SVG/PNG.
origin:
  type: first-party
metadata:
  author: ulises-jeremias
  version: '1.0'
  tags:
  - diagram
  - mermaid
  - architecture
  - markdown
---

# Mermaid — Primary Diagram Renderer (WHAT)

**Sources (2026-08-12):** `mermaid-js/mermaid` https://github.com/mermaid-js/mermaid MIT (Mermaid live editor https://mermaid.live); NPM `mermaid 10.x` `MIT` + `@mermaid-js/mermaid 10.9.7-preview.41` `MIT`; `docs/ARCHITECTURE.md` already authors Mermaid natively.

> **Pack:** `architecture` core (`architect + ADR + TRD + threat-model + mermaid (+ C4)`) — vendor-neutral. `cloud-architecture` optional composes `cloud-design-patterns + aws-well-architected-review + mermaid`. See `docs/architecture/research-385-diagram.md` for Mermaid vs C4 vs PlantUML/Structurizr/Excalidraw decision per §44.

## When to use

- Need flowchart, sequence, class, ER, gantt, gitGraph — text → SVG/PNG.
- Threat-model data-flow / sequence diagrams.

## Instructions

1. **Author** Mermaid block in Markdown: ` ```mermaid` + `flowchart TD` / `sequenceDiagram` / `classDiagram` etc.
2. **Render** via GitHub native or `mmdc -i diagram.mmd -o diagram.svg` (mermaid CLI).
3. **Collaborate** with `architect` + `threat-model` (data-flow) and `c4-model` (C4-inspired via Mermaid).

## Anti-patterns

- Do not add Excalidraw/draw.io binary — use Mermaid text.
- Do not require PlantUML infra for basic diagrams.