Agent Skillslangchain-ai/openwiki › mermaid-diagrams

mermaid-diagrams

GitHub

指导在Wiki中嵌入Mermaid图表以可视化运行时流程、状态机、数据模型及控制逻辑。强调基于源码准确绘制,提供语法安全规范防止渲染失败,并规定更新时的维护纪律。

skills/mermaid-diagrams/SKILL.md langchain-ai/openwiki

Trigger Scenarios

文档化运行时或请求流程 描述状态机或生命周期 展示数据模型或实体关系 解释复杂控制流

Install

npx skills add langchain-ai/openwiki --skill mermaid-diagrams -g -y
More Options

Use without installing

npx skills use langchain-ai/openwiki@mermaid-diagrams

指定 Agent (Claude Code)

npx skills add langchain-ai/openwiki --skill mermaid-diagrams -a claude-code -g -y

安装 repo 全部 skill

npx skills add langchain-ai/openwiki --all -g -y

预览 repo 内 skill

npx skills add langchain-ai/openwiki --list

SKILL.md

Frontmatter
{
    "name": "mermaid-diagrams",
    "description": "Embed Mermaid diagrams in generated wiki pages. Use whenever documenting a runtime or request flow, a call sequence, a state machine or lifecycle, a data model or entity relationships, or non-trivial control flow, since these are clearer as a diagram than as prose. Also use when an update run touches a page that already contains a mermaid fence, or a page that contains a text fence a previous run degraded."
}

Mermaid Diagrams In Generated Wiki Pages

Diagrams are part of high-quality wiki generation, not decoration. Where a flow, lifecycle, or data model is easier to grasp visually, embed a Mermaid diagram in a fenced ```mermaid block on the most relevant page.

Choosing a diagram type

  • sequenceDiagram for runtime and request flows across components (auth flows, request lifecycles, agent tool loops).
  • stateDiagram-v2 for lifecycles and state machines (job states, connection states, run phases).
  • erDiagram for the data model: entities and their relationships.
  • flowchart TD for branching control flow and decision logic.

Discipline

  • Ground every diagram in inspected source. Do not invent participants, states, entities, or relationships the code does not support.
  • Cover the high-value cases: add a diagram wherever a page documents a request or runtime flow, a call sequence, a lifecycle or state machine, or a data model. A repository wiki usually has several such diagrams, not one overall. Skip pages that are navigation, reference tables, or pure configuration.
  • Still prefer a few strong diagrams over decorating every page: one accurate diagram on the page that needs it beats a diagram forced onto every page.
  • Give each diagram a one-line caption directly below it stating what it shows.
  • OpenWiki validates every mermaid fence after your run and converts fences that fail to parse into plain text fences. A degraded diagram is a quality failure; follow the syntax rules below so it does not happen.

Syntax safety

These rules prevent the most common render breakages. When in doubt, rephrase the label.

  • Never place semicolons or pipes inside node, message, or edge labels.
  • Never place unescaped angle brackets in labels; write "returns Promise of User" instead of "returns Promise<User>".
  • In flowchart, wrap any label containing parentheses, brackets, or other punctuation in double quotes: A["calls foo(bar)"].
  • In flowchart, never use the bare word end as a node id, and never start a node id with o or x followed by a dash (both are edge-marker syntax); rename the node.
  • In sequenceDiagram, participant names with spaces or punctuation need an alias: participant AS as Auth Service.
  • Never use a Mermaid reserved word as a participant name, alias, or node id: note, end, loop, alt, opt, par, and, else, activate, deactivate, class, state, click, link. For example a notification participant must be Notifier, not Note (which collides with the note keyword).
  • In erDiagram, entity and attribute names must be single identifier-like tokens; put human phrasing in the relationship label.
  • Keep labels short. Move explanation into the surrounding prose or the caption, not the diagram.

Update runs

  • A wrong diagram is a stale claim, not existing structure to preserve. If a source change makes a diagram inaccurate, update the diagram in the same edit as the surrounding prose.
  • Do not rewrite a diagram that is still accurate. Regenerating unchanged diagrams creates diff noise.
  • If a page contains a text fence preceded by an HTML comment starting with "openwiki: mermaid parse failed", that is a diagram a previous run degraded. Fix the syntax using the parser error in the comment, restore the ```mermaid fence, and delete the comment.

Version History

  • 0.2.4 Current 2026-07-30 21:02

Same Skill Collection

skills/migrate-wiki-to-okf/SKILL.md
skills/write-connector/SKILL.md

Metadata

Files
0
Version
398ebad
Hash
cb49ce57
Indexed
2026-07-30 21:02

Главная - Вики-сайт
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-03 12:24
浙ICP备14020137号-1 $Гость$