ワンクリックでManusで任意のスキルを実行

mermaid

スター1

フォーク0

更新日2026年6月22日 17:01

Create Mermaid diagrams (flowchart, mindmap, sequence, class, etc.) as HTML files. Use when the user asks for a diagram, flowchart, mind map, sequence diagram, architecture diagram, or any visual chart. Covers syntax rules, common pitfalls, and delivery workflow.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

abxxvrv

abxxvrv/navi_agent

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Mermaid Diagram Skill

Generate Mermaid diagrams as standalone HTML files that open directly in a browser.

Workflow

Write Mermaid code following the syntax rules below
Save as .html file using the HTML template
Send the file path to the user (double-click opens in browser)

HTML Template

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>{TITLE}</title>
<style>
  body {
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; margin: 0; background: #f8f9fa; font-family: sans-serif;
  }
  .mermaid {
    background: white; padding: 40px; border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
</style>
</head>
<body>
<div class="mermaid">
{MERMAID_CODE}
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true, theme:'default'});</script>
</body>
</html>

Diagram Types

Type	Syntax	Use case
flowchart	`flowchart TD` / `flowchart LR`	流程图、架构图
mindmap	`mindmap`	思维导图
sequence	`sequenceDiagram`	时序图
class	`classDiagram`	类图
state	`stateDiagram-v2`	状态机
er	`erDiagram`	ER图
gantt	`gantt`	甘特图
pie	`pie`	饼图

Syntax Rules (CRITICAL)

General

Use TD (top-down) or LR (left-right) for flowchart direction
Node IDs must be alphanumeric (no special chars)
Use ["text"] for node labels with special characters
Quotes inside labels: use #quot; not "

Mindmap (most error-prone)

Indentation: Exactly 2 spaces per level. No tabs.

Root node: root((text)) — circle shape

Node text rules:

NO **bold** or *italic* — not supported
NO <br> — not supported
NO →, ×, · — use ->, x, * instead
NO #, {, }, [, ] in bare text — wrap in quotes if needed
Keep text simple and short

Valid mindmap:

mindmap
  root((主题))
    分支A
      叶子1
      叶子2
    分支B
      叶子3

INVALID (will cause "Syntax error in text"):

mindmap
  root((主题<br>副标题))
    **分支A**
      叶子1: V → V

Flowchart

Node shapes:

[text] — rectangle
(text) — rounded
{text} — diamond
((text)) — circle
>text] — flag
[/text/] — parallelogram

Connections:

A --> B — arrow
A --- B — line (no arrow)
A -->|text| B — labeled arrow
A -.-> B — dotted arrow
A ==> B — thick arrow

Subgraphs:

subgraph title
  A --> B
end

Sequence Diagram

sequenceDiagram
  participant A as Alice
  participant B as Bob
  A->>B: Hello
  B-->>A: Hi back
  A->>B: How are you?
  B-->>A: Great!

Arrows: ->> solid, -->> dashed, -x solid cross, --x dashed cross

Common Pitfalls

"Syntax error in text": Usually caused by special chars in node text or **bold** in mindmap. Simplify text.
Indentation errors: Mindmap requires exactly 2-space indent per level. No mixed tabs/spaces.
Chinese characters: Work fine, but avoid mixing with special punctuation in node text.
Long text in nodes: Keep concise. Use ["long text with spaces"] in flowcharts.
Mermaid version: Use CDN mermaid@11 or later for best compatibility.

Delivery

Always save as .html file (standalone, no server needed)
Tell the user the file path — they double-click to open
If the user wants a shareable link, paste the mermaid code into mermaid.live and share the URL

このリポジトリの他の Skills

同じリポジトリ

navi-design

abxxvrv/navi_agent

Navi Agent 设计参考库。当用户询问 navi agent 的架构设计、功能方案、技术选型、或某个具体实现应该如何做时，自动参考 Claude Code (cc_src/)、KIMI-CLI (kimi-cli/)、Hermes (hermes-agent/) 三个成熟项目的源码来提供建议。触发场景包括：讨论 agent loop 设计、工具系统、审批机制、会话管理、UI/CLI 交互、技能系统、插件机制、subagent、MCP 集成等任何 navi 的功能设计问题。也适用于：添加新工具、修改工具行为、集成外部 API。也适用于：多智能体系统设计、Worker 模式、sub_agent 委派模式、Interactive SubAgent 模式、Human-in-the-Loop 模式。也适用于：LangGraph 功能评估、工具调用兼容性分析、模型适配方案选型。

2026-07-151

cli-tool-output-arch

abxxvrv/navi_agent

CLI agent 工具输出架构设计与调试。当排查工具输出重复、输出丢失、输出乱序、实时流与结果渲染冲突、输出截断策略等问题时使用。也适用于为新的 CLI agent 工具设计输出通道。触发词：工具输出重复、output twice、双份输出、流式输出、tool result rendering、输出截断、truncat。

2026-06-271

navi-tool-dev

abxxvrv/navi_agent

Navi Agent 工具开发指南。当需要为 Navi 添加新工具（tool）、修改已有工具、或理解工具注册机制时使用。触发场景：用户说"写一个 XX 工具"、"添加工具"、"tool 怎么写"、"注册工具"、涉及 tool.py 或 runtime.py 中工具注册部分的修改。也适用于：集成外部工具协议（MCP 等）、添加工具子系统、批量注册动态发现的工具。也适用于：添加或修改斜杠命令（/xxx）、斜杠命令子命令。

2026-06-271

pptx

abxxvrv/navi_agent

演示文稿创建、编辑和分析。当用户需要处理 PowerPoint 演示文稿（.pptx 文件）时使用，包括创建新演示文稿、修改内容、处理布局、添加批注或演讲者备注等。也适用于将 guizang-ppt HTML 转换为 PPTX。也适用于基于 Word/文本文档生成学术汇报 PPT（docx→PPT），包含中文学术 PPT 配色方案、卡片布局、条形图、表格等常用模式。触发词：做PPT、做个PPT、演示文稿、slides、presentation、汇报PPT。

2026-06-271

cli-hub-meta-skill

abxxvrv/navi_agent

Discover agent-native CLIs for professional software. Access the live catalog to find tools for creative workflows, productivity, AI, and more.

2026-06-261

code-architecture-analysis

abxxvrv/navi_agent

深入分析复杂项目的架构设计、核心机制和实现原理。当用户询问"为什么 X 能做到 Y"、"系统是怎么工作的"、"分析一下这个项目的架构"时使用。也适用于主动分析开源项目的技术栈、模块划分、数据流、配置体系。覆盖 LangChain/LangGraph Agent、前后端分离 Web 应用、CLI 工具等常见项目类型。也适用于：代码缺陷审查（安全漏洞、架构问题、设计反模式）、两个或多个项目的全面对比分析。触发词："缺陷"、"有什么问题"、"对比"、"区别"、"哪个更好"、"review"、"审计"。

2026-06-261

name	mermaid
description	Create Mermaid diagrams (flowchart, mindmap, sequence, class, etc.) as HTML files. Use when the user asks for a diagram, flowchart, mind map, sequence diagram, architecture diagram, or any visual chart. Covers syntax rules, common pitfalls, and delivery workflow.

Mermaid Diagram Skill

Generate Mermaid diagrams as standalone HTML files that open directly in a browser.

Workflow

Write Mermaid code following the syntax rules below
Save as .html file using the HTML template
Send the file path to the user (double-click opens in browser)

HTML Template

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>{TITLE}</title>
<style>
  body {
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; margin: 0; background: #f8f9fa; font-family: sans-serif;
  }
  .mermaid {
    background: white; padding: 40px; border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
</style>
</head>
<body>
<div class="mermaid">
{MERMAID_CODE}
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true, theme:'default'});</script>
</body>
</html>

Diagram Types

Type	Syntax	Use case
flowchart	`flowchart TD` / `flowchart LR`	流程图、架构图
mindmap	`mindmap`	思维导图
sequence	`sequenceDiagram`	时序图
class	`classDiagram`	类图
state	`stateDiagram-v2`	状态机
er	`erDiagram`	ER图
gantt	`gantt`	甘特图
pie	`pie`	饼图

Syntax Rules (CRITICAL)

General

Use TD (top-down) or LR (left-right) for flowchart direction
Node IDs must be alphanumeric (no special chars)
Use ["text"] for node labels with special characters
Quotes inside labels: use #quot; not "

Mindmap (most error-prone)

Indentation: Exactly 2 spaces per level. No tabs.

Root node: root((text)) — circle shape

Node text rules:

NO **bold** or *italic* — not supported
NO <br> — not supported
NO →, ×, · — use ->, x, * instead
NO #, {, }, [, ] in bare text — wrap in quotes if needed
Keep text simple and short

Valid mindmap:

mindmap
  root((主题))
    分支A
      叶子1
      叶子2
    分支B
      叶子3

INVALID (will cause "Syntax error in text"):

mindmap
  root((主题<br>副标题))
    **分支A**
      叶子1: V → V

Flowchart

Node shapes:

[text] — rectangle
(text) — rounded
{text} — diamond
((text)) — circle
>text] — flag
[/text/] — parallelogram

Connections:

A --> B — arrow
A --- B — line (no arrow)
A -->|text| B — labeled arrow
A -.-> B — dotted arrow
A ==> B — thick arrow

Subgraphs:

subgraph title
  A --> B
end

Sequence Diagram

sequenceDiagram
  participant A as Alice
  participant B as Bob
  A->>B: Hello
  B-->>A: Hi back
  A->>B: How are you?
  B-->>A: Great!

Arrows: ->> solid, -->> dashed, -x solid cross, --x dashed cross

Common Pitfalls

"Syntax error in text": Usually caused by special chars in node text or **bold** in mindmap. Simplify text.
Indentation errors: Mindmap requires exactly 2-space indent per level. No mixed tabs/spaces.
Chinese characters: Work fine, but avoid mixing with special punctuation in node text.
Long text in nodes: Keep concise. Use ["long text with spaces"] in flowcharts.
Mermaid version: Use CDN mermaid@11 or later for best compatibility.

Delivery

Always save as .html file (standalone, no server needed)
Tell the user the file path — they double-click to open
If the user wants a shareable link, paste the mermaid code into mermaid.live and share the URL