Mermaid jam

Skill sarveshsea/design-skills/skills/mermaid-jam

Practical design judgment for AI coding agents: 78 installable skills for craft, research, generation, Figma, and Memoire.

Install

npx -y skills add sarveshsea/design-skills --skill mermaid-jam

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Route Mermaid and markdown diagram source into the Mermaid Jam FigJam plugin for editable native FigJam output

SKILL.md

3.0 KB, as published. Nobody here has run it

Mermaid Jam

Use this Note when a user asks to turn Mermaid markdown, fenced Mermaid blocks, or markdown user-flow notes into a FigJam diagram.

Use the research-vibe-design path when the source should come from Memoire research or Scenario Lab instead of hand-authored Mermaid. It generates Atomic Design specs, evidence maps, journey maps, IA flows, and optional simulation timelines before handing source to Mermaid Jam.

Native Route

Run memi mermaid-jam status --json.
If integration.local.ready is true, use the reported integration.local.manifestPath for local development import.
If no local checkout is ready, use integration.communityUrl and open the Figma Community install page.
Open the plugin from a FigJam board, not a Figma design file, then paste the Mermaid or markdown source into Mermaid Jam.

For Mémoire Studio on macOS, prefer the native corpus path before falling back to manual plugin paste:

memi mermaid-jam corpus sync --setup --json
memi mermaid-jam analyze ./docs/flow.md --json

Studio stores the reviewed markdown-only corpus in .memoire/markdown-corpus and can sync analyzed candidates through the connected FigJam bridge as editable FigJam nodes. The corpus downloader only stores .md, .mdx, .markdown, and .mdoc files from the allowlisted repos.

The manifest may be importable from Figma and FigJam, but generation is FigJam-native because the renderer creates FigJam sections, shape cards, and dynamic connectors.

Supported Inputs

Mermaid flowchart / graph
Mermaid journey
Mermaid sequenceDiagram
Mermaid stateDiagram / stateDiagram-v2
Mermaid mindmap
Mermaid timeline
Markdown headings and bullets describing a user flow
Markdown tables, frontmatter titles, links, and section hierarchy as scoring context for process, journey, timeline, API, architecture, and checklist flows

Local Development

When developing the plugin alongside Memoire, set:

export MEMOIRE_MERMAID_JAM_ROOT=/path/to/unicornjam

Then run:

memi mermaid-jam status --json

If the status is needs-build, run npm install && npm run build inside the Mermaid Jam checkout before importing plugin/manifest.json.

Research Vibe Design

memi research synthesize
memi research design --intent "Design a research-backed product decision workspace" --write-specs --mermaid-jam --json
memi mermaid-jam export --from research --json

If Scenario Lab has a completed simulation, use the run id:

memi research design --run-id <simulation-run-id> --mermaid-jam --open --json
memi mermaid-jam export --from <simulation-run-id> --open --json

Stay on the source + open path: write nonempty .mmd or .md files under .memoire/mermaid-jam/, open Mermaid Jam through the local manifest or Community URL, then let the user paste source into the FigJam plugin.