Archify Diagrams
tt-a1i/archify
Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.
Create flowcharts, sequence diagrams, and architecture diagrams with Mermaid
Install Mermaid Diagram Guide
$ npx skills add wentorai/research-plugins --skill mermaid-diagram-guide -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install wentorai/research-plugins mermaid-diagram-guide --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/tools/diagram/mermaid-diagram-guide .claude/skills/mermaid-diagram-guide && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "mermaid-diagram-guide" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/mermaid-diagram-guide into .claude/skills/mermaid-diagram-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-diagram-guide", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/mermaid-diagram-guideType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add wentorai/research-plugins --skill mermaid-diagram-guide -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install wentorai/research-plugins mermaid-diagram-guide --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/tools/diagram/mermaid-diagram-guide .agents/skills/mermaid-diagram-guide && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "mermaid-diagram-guide" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/mermaid-diagram-guide into .agents/skills/mermaid-diagram-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-diagram-guide", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add wentorai/research-plugins --skill mermaid-diagram-guide -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install wentorai/research-plugins mermaid-diagram-guide --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/tools/diagram/mermaid-diagram-guide .cursor/skills/mermaid-diagram-guide && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "mermaid-diagram-guide" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/mermaid-diagram-guide into .cursor/skills/mermaid-diagram-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-diagram-guide", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/wentorai/research-plugins.git --path skills/tools/diagram/mermaid-diagram-guide--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add wentorai/research-plugins --skill mermaid-diagram-guide -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install wentorai/research-plugins mermaid-diagram-guide --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/tools/diagram/mermaid-diagram-guide .gemini/skills/mermaid-diagram-guide && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "mermaid-diagram-guide" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/mermaid-diagram-guide into .gemini/skills/mermaid-diagram-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-diagram-guide", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install wentorai/research-plugins mermaid-diagram-guideInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add wentorai/research-plugins --skill mermaid-diagram-guide -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/tools/diagram/mermaid-diagram-guide .github/skills/mermaid-diagram-guide && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "mermaid-diagram-guide" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/mermaid-diagram-guide into .github/skills/mermaid-diagram-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-diagram-guide", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add wentorai/research-plugins --skill mermaid-diagram-guide -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install wentorai/research-plugins mermaid-diagram-guide --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/tools/diagram/mermaid-diagram-guide .opencode/skills/mermaid-diagram-guide && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "mermaid-diagram-guide" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/mermaid-diagram-guide into .opencode/skills/mermaid-diagram-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-diagram-guide", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
mermaid-diagram-guide- GitHub stars
- 298
- Used in
- 1 other repo
- Token cost
- ~1.9k tokens
- SKILL.md length
- 411 words
- Files
- 1
- Skills in repo
- 405
- Repo updated
- First seen
- Licence
- MIT
At a glance
Create flowcharts, sequence diagrams, and architecture diagrams with Mermaid
- Tasks that involve Diagrams
- SKILL.md covers Overview, Flowcharts, Sequence Diagrams and Class Diagrams, plus 5 more sections
- Calls npm
What it does
Mermaid Diagram Guide is an agent skill from wentorai/research-plugins. Create flowcharts, sequence diagrams, and architecture diagrams with Mermaid
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development, covering Diagrams. It works with Mermaid. The repository describes itself as: 350+ academic research skills, MCP configs, and plugins for Research-Claw and AI agents. The licence is MIT.
When your agent uses it
- Tasks that involve Diagrams
Example prompts
- “/mermaid-diagram-guide”
Requirements
- Node.js
What it can do on your machine
Read from SKILL.md and the folder at commit bf44b3c. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
mermaid.livemermaid.js.orggithub.comgithub.blog
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Mermaid Diagram Guide loads about 1.9k tokens when it runs. Until then it costs about 25 tokens; SKILL.md has 411 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from wentorai/research-plugins at commit bf44b3c, republished under its MIT licence (© wentorai). 411 words, ~1,944 tokens.
Download SKILL.mdSave it as
.claude/skills/mermaid-diagram-guide/SKILL.md (or your agent's skills folder).- name
- mermaid-diagram-guide
- description
- Create flowcharts, sequence diagrams, and architecture diagrams with Mermaid
Mermaid Diagram Guide
Overview
Mermaid is a text-based diagramming tool that renders diagrams from Markdown-like syntax. For researchers, Mermaid offers a unique combination of version-controllable source code, instant rendering in documentation platforms (GitHub, GitLab, Notion, Obsidian), and enough expressiveness to create flowcharts, sequence diagrams, class diagrams, Gantt charts, and more.
Unlike graphical tools like draw.io or Lucidchart, Mermaid diagrams live as plain text in your documentation, making them easy to maintain alongside code and papers. They are especially valuable for research documentation, README files, software architecture diagrams in methods sections, and graphical abstracts.
This guide covers the most useful Mermaid diagram types for academic work, with complete syntax references and real-world examples from research contexts. Each diagram type includes a template you can copy and modify for your specific needs.
Flowcharts
Flowcharts are the most common diagram type for describing algorithms, experimental procedures, and data processing pipelines.
Basic Syntax
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Process A]
B -->|No| D[Process B]
C --> E[End]
D --> ENode Shapes
| Shape | Syntax | Use Case |
|---|---|---|
| Rectangle | A[text] | Process step |
| Rounded | A(text) | Start/end |
| Diamond | A{text} | Decision |
| Hexagon | A{{text}} | Preparation |
| Parallelogram | A[/text/] | Input/output |
| Circle | A((text)) | Connector |
| Stadium | A([text]) | Terminal |
Research Pipeline Example
flowchart TD
subgraph Data Collection
A[Raw Data] --> B[Quality Check]
B --> C{Pass QC?}
C -->|No| D[Exclude]
C -->|Yes| E[Clean Data]
end
subgraph Analysis
E --> F[Feature Extraction]
F --> G[Model Training]
G --> H[Cross-Validation]
end
subgraph Evaluation
H --> I{Significant?}
I -->|Yes| J[Report Results]
I -->|No| K[Revise Hypothesis]
K --> F
end
style A fill:#3B82F6,color:#fff
style J fill:#16A34A,color:#fff
style D fill:#EF4444,color:#fffDirection Options
| Direction | Code | Description |
|---|---|---|
| Top to bottom | TD or TB | Default, vertical |
| Bottom to top | BT | Vertical, upward |
| Left to right | LR | Horizontal |
| Right to left | RL | Horizontal, reversed |
Sequence Diagrams
Sequence diagrams show interactions between components over time. They are ideal for describing API calls, protocol steps, and system interactions.
sequenceDiagram
participant U as User
participant F as Frontend
participant A as API Server
participant DB as Database
U->>F: Submit experiment
F->>A: POST /experiments
A->>DB: INSERT experiment
DB-->>A: experiment_id
A->>A: Queue processing job
Note over A: Async processing begins
A-->>F: 202 Accepted {id}
F-->>U: "Experiment submitted"
loop Every 5 seconds
F->>A: GET /experiments/{id}/status
A-->>F: {status: "running"}
end
A-->>F: {status: "complete", results: {...}}
F-->>U: Display resultsArrow Types
| Arrow | Syntax | Meaning |
|---|---|---|
| Solid with arrowhead | ->> | Synchronous call |
| Dotted with arrowhead | -->> | Response/return |
| Solid | -> | Message |
| Dotted | --> | Optional message |
| Cross | -x | Failed message |
Show full SKILL.md (156 more words)Show less
Class Diagrams
Class diagrams document code architecture and data models:
classDiagram
class Experiment {
+String id
+String name
+DateTime created_at
+Status status
+run()
+get_results() Results
}
class Dataset {
+String path
+int n_samples
+int n_features
+load() DataFrame
+split(ratio) TrainTest
}
class Model {
+String architecture
+Dict hyperparams
+train(Dataset)
+predict(Dataset) Array
+evaluate(Dataset) Metrics
}
Experiment "1" --> "1..*" Dataset : uses
Experiment "1" --> "1..*" Model : trains
Model ..> Dataset : depends onGantt Charts
Gantt charts are useful for project timelines and research plans:
gantt
title Research Project Timeline
dateFormat YYYY-MM-DD
axisFormat %b %Y
section Literature Review
Survey existing work :done, lit1, 2026-01-01, 30d
Identify research gap :done, lit2, after lit1, 14d
section Methodology
Design experiments :active, meth1, after lit2, 21d
Implement baseline :meth2, after meth1, 14d
section Experiments
Run baseline experiments :exp1, after meth2, 21d
Run proposed method :exp2, after exp1, 21d
Ablation studies :exp3, after exp2, 14d
section Writing
Draft paper :write1, after exp2, 30d
Internal review :write2, after write1, 14d
Submit to conference :milestone, after write2, 0dState Diagrams
State diagrams model entity lifecycles:
stateDiagram-v2
[*] --> Draft
Draft --> UnderReview : Submit
UnderReview --> MinorRevision : Reviewer feedback
UnderReview --> MajorRevision : Reviewer feedback
UnderReview --> Rejected : Reviewer feedback
MinorRevision --> UnderReview : Resubmit
MajorRevision --> UnderReview : Resubmit
UnderReview --> Accepted : Final decision
Accepted --> Published : Camera-ready
Rejected --> Draft : Revise for new venue
Published --> [*]Rendering and Integration
GitHub / GitLab
Both platforms render Mermaid natively in Markdown files:
```mermaid
flowchart LR
A --> B --> C
```Command-Line Rendering
# Install Mermaid CLI
npm install -g @mermaid-js/mermaid-cli
# Render to PNG
mmdc -i diagram.mmd -o diagram.png -w 1200
# Render to SVG (preferred for papers)
mmdc -i diagram.mmd -o diagram.svg
# Render to PDF
mmdc -i diagram.mmd -o diagram.pdfEmbedding in LaTeX
% Include the SVG generated by mmdc
\usepackage{svg}
\begin{figure}[h]
\centering
\includesvg[width=0.8\textwidth]{diagram}
\caption{System architecture overview.}
\end{figure}Best Practices
- Keep diagrams focused. One concept per diagram. If it exceeds 15-20 nodes, split it.
- Use subgraphs for grouping. They clarify which components belong together.
- Label all edges. Unlabeled arrows are ambiguous.
- Use consistent styling. Define colors for success (green), failure (red), and process (blue) states.
- Export as SVG for papers. SVG scales perfectly and produces crisp output at any size.
- Version-control your diagrams. Since Mermaid is text, it diffs cleanly in Git.
- Test in the live editor. Use mermaid.live to iterate quickly before committing.
References
- Mermaid Documentation -- Official reference
- Mermaid Live Editor -- Interactive diagram editor
- Mermaid CLI -- Command-line rendering tool
- GitHub Mermaid Support -- Native rendering in GitHub
© wentorai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/tools/diagram/mermaid-diagram-guide of wentorai/research-plugins.
Open the folder on GitHubat commit bf44b3c
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in wentorai/research-plugins, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Mermaid Diagram Guide next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Mermaid Diagram Guide this skillwentorai/research-plugins | 298 | 1 repos | ~1.9k | Automated safety check: Pass | MIT | |
| Archify Diagramstt-a1i/archify | 82k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Diagram Designcathrynlavery/diagram-design | 49k | 1 repos | ~7.6k | Automated safety check: Pass | MIT | |
| Draw.io Diagram StudioAgents365-ai/drawio-skill | 10k | — | ~2.4k | Automated safety check: Notes | MIT | |
| Pretty Mermaid Rendererimxv/Pretty-mermaid-skills | 1.5k | — | ~2k | Automated safety check: Pass | MIT | |
| Archify Diagram BuilderUnclecheng-li/AI_Animation | 1.5k | 2 repos | ~4.1k | Automated safety check: Pass | MIT |
Similar skills
Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
Pretty Mermaid Renderer
imxv/Pretty-mermaid-skills
Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.
Archify Diagram Builder
Unclecheng-li/AI_Animation
Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.
Mermaid
WH-2099/mermaid-skill
Generate Mermaid diagrams from user requirements. An agent skill from WH-2099/mermaid-skill.
More from wentorai/research-plugins
All 405 skills in this repoAbstract Writing Guide
wentorai/research-plugins
Craft structured research abstracts that maximize clarity and journal acceptance
Academic Citation Manager
wentorai/research-plugins
Manage academic citations across BibTeX, APA, MLA, and Chicago formats
Academic Paper Summarizer
wentorai/research-plugins
Summarize academic papers with structured extraction of key elements
Academic Study Methods
wentorai/research-plugins
Evidence-based study techniques for academic learning and retention
Academic Tone Guide
wentorai/research-plugins
Adjust writing tone and register for academic audiences and venues
Academic Translation Guide
wentorai/research-plugins
Academic translation, post-editing, and Chinglish correction guide
Related
Works with
Categories
Questions about Mermaid Diagram Guide
What does Mermaid Diagram Guide do?
Create flowcharts, sequence diagrams, and architecture diagrams with Mermaid. Mermaid Diagram Guide is an agent skill from wentorai/research-plugins.
When should I use Mermaid Diagram Guide?
Mermaid Diagram Guide fits situations like: tasks that involve Diagrams.
How do I install Mermaid Diagram Guide in Claude Code?
Run `npx skills add wentorai/research-plugins --skill mermaid-diagram-guide -a claude-code`. Or copy the skill folder (skills/tools/diagram/mermaid-diagram-guide in wentorai/research-plugins) into .claude/skills/mermaid-diagram-guide in your project. Claude Code loads it when a task matches its description.
How do I install Mermaid Diagram Guide in Codex?
Run `npx skills add wentorai/research-plugins --skill mermaid-diagram-guide -a codex`. Or copy the skill folder (skills/tools/diagram/mermaid-diagram-guide in wentorai/research-plugins) into .agents/skills/mermaid-diagram-guide in your project. Codex loads it when a task matches its description.
Can I use Mermaid Diagram Guide in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add wentorai/research-plugins --skill mermaid-diagram-guide -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mermaid-diagram-guide, .gemini/skills/mermaid-diagram-guide, .github/skills/mermaid-diagram-guide and .opencode/skills/mermaid-diagram-guide in your project.
What does Mermaid Diagram Guide need to run?
Going by SKILL.md and its folder, Mermaid Diagram Guide needs the command-line tools its instructions call (npm). Our summary lists: Node.js.
Does Mermaid Diagram Guide access the network?
SKILL.md names 4 domains. As links in the text: mermaid.live, mermaid.js.org, github.com and github.blog. This is read from the text; nothing was executed.
Is Mermaid Diagram Guide safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Mermaid Diagram Guide use?
Mermaid Diagram Guide is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Mermaid Diagram Guide use?
About 1.9k tokens (SKILL.md is roughly 7.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Mermaid Diagram Guide?
Skills that share tags, products or a category with Mermaid Diagram Guide: Archify Diagrams (tt-a1i/archify, 82k stars), Diagram Design (cathrynlavery/diagram-design, 49k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars) and Pretty Mermaid Renderer (imxv/Pretty-mermaid-skills, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Mermaid Diagram Guide?
wentorai (a GitHub user) maintains it in wentorai/research-plugins, which has 298 GitHub stars. The repository holds 405 skills in this directory. The repository was last updated on June 19, 2026.
Source: wentorai/research-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.