Agent skill

Mermaid Architect Guide

by wentorai in wentorai/research-plugins

Design complex multi-diagram architectures using advanced Mermaid syntax

MITAuto-check passedDevelopment

Install Mermaid Architect Guide

skills CLI
$ npx skills add wentorai/research-plugins --skill mermaid-architect-guide -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install wentorai/research-plugins mermaid-architect-guide --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-architect-guide .claude/skills/mermaid-architect-guide && rm -rf skills-src

Use ~/.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/

Facts

Skill name
mermaid-architect-guide
GitHub stars
298
Used in
1 other repo
Token cost
~1.8k tokens
SKILL.md length
294 words
Files
1
Skills in repo
405
Repo updated
First seen
Licence
MIT

At a glance

Design complex multi-diagram architectures using advanced Mermaid syntax

  • Tasks that involve Diagrams
  • SKILL.md covers Overview, Hand-Drawn Mode, C4 Architecture Diagrams and Advanced Subgraph Patterns, plus 4 more sections
  • Calls npm

What it does

Mermaid Architect Guide is an agent skill from wentorai/research-plugins. Design complex multi-diagram architectures using advanced Mermaid syntax

Its SKILL.md is about 1.8k 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-architect-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.js.org
    • c4model.com
    • github.com
    • mermaid.live

    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 Architect Guide loads about 1.8k tokens when it runs. Until then it costs about 24 tokens; SKILL.md has 294 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~24
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k

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). 294 words, ~1,829 tokens.

Download SKILL.mdSave it as .claude/skills/mermaid-architect-guide/SKILL.md (or your agent's skills folder).
name
mermaid-architect-guide
description
Design complex multi-diagram architectures using advanced Mermaid syntax

Mermaid Architect Guide

Design complex, multi-view system architectures and research infrastructure diagrams using advanced Mermaid features including C4 diagrams, hand-drawn rendering mode, subgraph nesting, and theme customization.

Overview

While basic Mermaid flowcharts are widely known, Mermaid's advanced capabilities enable sophisticated architectural documentation that rivals dedicated tools like Structurizr or Draw.io. This skill focuses on the architectural use cases that matter most to research teams: depicting multi-layer systems, data pipelines, deployment topologies, and complex experimental workflows.

Mermaid v11+ introduced a hand-drawn rendering mode (via the handDrawn look) that produces a sketch-like aesthetic similar to Excalidraw but with the convenience of text-based Markdown embedding. This makes it ideal for research proposals and informal documentation where a polished diagram would feel premature.

Research software systems often involve intricate interactions between data sources, processing pipelines, ML models, and visualization layers. The C4 model support in Mermaid allows teams to document these systems at multiple levels of abstraction -- from high-level context diagrams down to detailed component views -- all in version-controlled Markdown files.

Hand-Drawn Mode

Enable the sketchy, informal rendering style:

mermaid
---
config:
  look: handDrawn
  theme: neutral
---
flowchart LR
    A[Raw Data] --> B[Preprocessing]
    B --> C[Feature Engineering]
    C --> D[Model Training]
    D --> E[Evaluation]
    E -->|Poor| C
    E -->|Good| F[Deployment]

The handDrawn look applies rough.js-style rendering to all elements, giving them a natural sketched appearance. This is particularly useful for early-stage architecture discussions and research proposals.

C4 Architecture Diagrams

Context Diagram (Level 1)
mermaid
C4Context
    title Research Platform - System Context

    Person(researcher, "Researcher", "Academic user conducting studies")
    Person(admin, "Platform Admin", "Manages skills and users")

    System(platform, "Wentor Platform", "AI-powered research assistant ecosystem")

    System_Ext(scholar, "OpenAlex", "Academic paper database")
    System_Ext(crossref, "CrossRef", "DOI resolution and metadata")
    System_Ext(github, "GitHub", "Code and skill repositories")

    Rel(researcher, platform, "Uses", "HTTPS")
    Rel(admin, platform, "Manages", "HTTPS")
    Rel(platform, scholar, "Queries papers", "REST API")
    Rel(platform, crossref, "Resolves DOIs", "REST API")
    Rel(platform, github, "Fetches skills", "REST API")
Container Diagram (Level 2)
mermaid
C4Container
    title Research Platform - Container View

    Person(researcher, "Researcher")

    Container_Boundary(platform, "Wentor Platform") {
        Container(web, "Web App", "React + UmiJS", "Browser-based UI")
        Container(api, "API Server", "FastAPI", "REST endpoints")
        Container(claw, "Research-Claw", "Node.js", "Local AI agent")
        ContainerDb(db, "Database", "PostgreSQL", "User data, skills, tokens")
        ContainerDb(cache, "Cache", "Redis", "Session and rate limit data")
    }

    System_Ext(llm, "LLM Provider", "Claude / GPT")

    Rel(researcher, web, "Browses", "HTTPS")
    Rel(researcher, claw, "Runs locally", "WS localhost")
    Rel(web, api, "Calls", "REST/JSON")
    Rel(api, db, "Reads/Writes", "SQL")
    Rel(api, cache, "Caches", "Redis protocol")
    Rel(claw, llm, "Sends prompts", "HTTPS")

Advanced Subgraph Patterns

Nested Research Pipeline
mermaid
flowchart TB
    subgraph ingestion ["Data Ingestion Layer"]
        direction LR
        A1[PubMed API] --> B1[Raw Store]
        A2[arXiv API] --> B1
        A3[CrossRef API] --> B1
    end

    subgraph processing ["Processing Pipeline"]
        direction LR
        C1[Text Extraction] --> C2[NER & Entity Linking]
        C2 --> C3[Citation Graph Construction]
        C3 --> C4[Embedding Generation]
    end

    subgraph serving ["Serving Layer"]
        direction LR
        D1[Search Index] --> D2[Recommendation Engine]
        D2 --> D3[REST API]
    end

    ingestion --> processing --> serving
Experiment Workflow with Decision Gates
mermaid
flowchart TD
    Start([Begin Experiment]) --> Design[Study Design]
    Design --> IRB{IRB Approval?}
    IRB -->|Approved| Pilot[Pilot Study n=30]
    IRB -->|Revision needed| Design
    Pilot --> PilotCheck{Pilot Successful?}
    PilotCheck -->|Yes| FullStudy[Full Study n=300]
    PilotCheck -->|No| Redesign[Revise Protocol]
    Redesign --> Pilot
    FullStudy --> Analysis[Statistical Analysis]
    Analysis --> Results{Significant?}
    Results -->|p < 0.05| Write[Write Manuscript]
    Results -->|p >= 0.05| Explore[Exploratory Analysis]
    Explore --> Write
    Write --> Submit([Submit to Journal])

State Diagrams for Research Processes

mermaid
stateDiagram-v2
    [*] --> Ideation
    Ideation --> ProposalDrafting : Concept validated

    state ProposalDrafting {
        [*] --> Writing
        Writing --> InternalReview
        InternalReview --> Writing : Revisions needed
        InternalReview --> Ready : Approved
    }

    ProposalDrafting --> Submitted : Submit to funder
    Submitted --> UnderReview : Acknowledged
    UnderReview --> Funded : Award
    UnderReview --> Rejected : Decline
    Rejected --> Ideation : Revise concept
    Funded --> Active : Project kickoff
    Active --> Reporting : Milestone due
    Reporting --> Active : Report accepted
    Active --> Completed : All deliverables met
    Completed --> [*]

Theme Customization

mermaid
%%{init: {
  'theme': 'base',
  'themeVariables': {
    'primaryColor': '#1971c2',
    'primaryTextColor': '#ffffff',
    'primaryBorderColor': '#1864ab',
    'lineColor': '#495057',
    'secondaryColor': '#e03131',
    'tertiaryColor': '#f8f9fa',
    'fontFamily': 'Inter, sans-serif'
  }
}}%%
flowchart LR
    A[Input] --> B[Process] --> C[Output]

Rendering and Integration

PlatformSupportNotes
GitHub MarkdownNativeRenders in README, issues, PRs
GitLabNativeFull Mermaid support
ObsidianNativeReal-time preview
NotionVia embedUse mermaid.ink URL encoding
LaTeXPre-renderUse mmdc CLI to export SVG/PDF
JupyterVia pluginmermaid-py or iframe rendering
CLI Rendering
bash
# Install Mermaid CLI
npm install -g @mermaid-js/mermaid-cli

# Render to SVG
mmdc -i architecture.mmd -o architecture.svg -t neutral

# Render with hand-drawn look
mmdc -i architecture.mmd -o sketch.svg --configFile mermaid-config.json

References

© 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-architect-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 Architect 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.

Mermaid Architect Guide compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Mermaid Architect Guide this skillwentorai/research-plugins2981 repos~1.8kAutomated safety check: PassMIT
Archify Diagramstt-a1i/archify82k—~2.9kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design49k1 repos~7.6kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT
Pretty Mermaid Rendererimxv/Pretty-mermaid-skills1.5k—~2kAutomated safety check: PassMIT
Archify Diagram BuilderUnclecheng-li/AI_Animation1.5k2 repos~4.1kAutomated safety check: PassMIT

Similar skills

  • 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.

    82k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed
  • 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.

    49k GitHub starsUsed in 1 repo~7.6k tokens
    DevelopmentAuto-check passed
  • 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.

    10k GitHub stars~2.4k tokensUpdated today
    DevelopmentAuto-check: notes
  • 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.

    1.5k GitHub stars~2k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed
  • 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.

    1.5k GitHub starsUsed in 2 repos~4.1k tokens
    DevelopmentAuto-check passed
  • Mermaid

    WH-2099/mermaid-skill

    Generate Mermaid diagrams from user requirements. An agent skill from WH-2099/mermaid-skill.

    288 GitHub starsUsed in 4 repos~958 tokens
    DevelopmentAuto-check passed

More from wentorai/research-plugins

All 405 skills in this repo
  • Abstract Writing Guide

    wentorai/research-plugins

    Craft structured research abstracts that maximize clarity and journal acceptance

    298 GitHub starsUsed in 1 repo~1.7k tokens
    Auto-check passed
  • Academic Citation Manager

    wentorai/research-plugins

    Manage academic citations across BibTeX, APA, MLA, and Chicago formats

    298 GitHub starsUsed in 1 repo~2.7k tokens
    Auto-check passed
  • Academic Paper Summarizer

    wentorai/research-plugins

    Summarize academic papers with structured extraction of key elements

    298 GitHub starsUsed in 1 repo~1.4k tokens
    Auto-check passed
  • Academic Study Methods

    wentorai/research-plugins

    Evidence-based study techniques for academic learning and retention

    298 GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check passed
  • Academic Tone Guide

    wentorai/research-plugins

    Adjust writing tone and register for academic audiences and venues

    298 GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed
  • Academic Translation Guide

    wentorai/research-plugins

    Academic translation, post-editing, and Chinglish correction guide

    298 GitHub starsUsed in 1 repo~1.6k tokens
    Auto-check passed

Works with

Categories

Questions about Mermaid Architect Guide

What does Mermaid Architect Guide do?

Design complex multi-diagram architectures using advanced Mermaid syntax. Mermaid Architect Guide is an agent skill from wentorai/research-plugins.

When should I use Mermaid Architect Guide?

Mermaid Architect Guide fits situations like: tasks that involve Diagrams.

How do I install Mermaid Architect Guide in Claude Code?

Run `npx skills add wentorai/research-plugins --skill mermaid-architect-guide -a claude-code`. Or copy the skill folder (skills/tools/diagram/mermaid-architect-guide in wentorai/research-plugins) into .claude/skills/mermaid-architect-guide in your project. Claude Code loads it when a task matches its description.

How do I install Mermaid Architect Guide in Codex?

Run `npx skills add wentorai/research-plugins --skill mermaid-architect-guide -a codex`. Or copy the skill folder (skills/tools/diagram/mermaid-architect-guide in wentorai/research-plugins) into .agents/skills/mermaid-architect-guide in your project. Codex loads it when a task matches its description.

Can I use Mermaid Architect 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-architect-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-architect-guide, .gemini/skills/mermaid-architect-guide, .github/skills/mermaid-architect-guide and .opencode/skills/mermaid-architect-guide in your project.

What does Mermaid Architect Guide need to run?

Going by SKILL.md and its folder, Mermaid Architect Guide needs the command-line tools its instructions call (npm). Our summary lists: Node.js.

Does Mermaid Architect Guide access the network?

SKILL.md names 4 domains. As links in the text: mermaid.js.org, c4model.com, github.com and mermaid.live. This is read from the text; nothing was executed.

Is Mermaid Architect 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 Architect Guide use?

Mermaid Architect 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 Architect Guide use?

About 1.8k tokens (SKILL.md is roughly 7.3k 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 Architect Guide?

Skills that share tags, products or a category with Mermaid Architect 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 Architect 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.