Mermaid図の構文検証と修正を行うスキル。 architecture.md生成時のパースエラーを防止。
/plugin marketplace add sk8metalme/michi/plugin install michi@sk8metal-michiThis skill is limited to using the following tools:
Mermaid図の構文エラーを検出し、自動修正を行うことで、ドキュメント生成時のパースエラーを防止する。
docs/**/architecture.mddocs/**/design.mddocs/**/sequence.md*.md (Mermaid図を含むすべてのMarkdownファイル)構文エラー検出
C4モデル構文検証
C4Context, C4Container, C4Component の正しい使用Person(), System(), Rel() の引数チェックシーケンス図検証
participant 宣言の確認->>, -->>, ->>）の正しい使用グラフ構文検証
C4Context
title System Context Diagram
Person(user, "User", "エンドユーザー")
System(system, "System Name", "システム説明")
System_Ext(external, "External System", "外部システム")
Rel(user, system, "Uses", "HTTPS")
Rel(system, external, "Integrates", "REST/HTTPS")
注意点:
C4Context の後に改行が必要title は必須ではないが推奨Rel() の引数は必ず4つ（from, to, label, technology）sequenceDiagram
participant User
participant Frontend
participant Backend
User->>Frontend: リクエスト
Frontend->>Backend: API呼び出し
Backend-->>Frontend: レスポンス
Frontend-->>User: 表示
注意点:
participant 宣言は必須ではないが推奨->>（同期）、-->>（非同期）、-x（破棄）を区別graph TB
A[クライアント] --> B[APIゲートウェイ]
B --> C[バックエンドサービス]
C --> D[データベース]
C --> E[外部API]
注意点:
graph TB（上から下）、graph LR（左から右）[] で囲むsubgraph はインデント必須erDiagram
USER ||--o{ ORDER : places
USER {
string id
string name
string email
}
ORDER {
string id
string userId
date createdAt
}
注意点:
||--o{（1対多）、}o--o{（多対多）type name の順# Mermaid Live Editorで検証
# https://mermaid.live/
# または、mermaid-cliを使用
npx @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.svg
# Markdownファイル内のMermaid図を抽出
grep -A 50 '```mermaid' architecture.md > extracted-diagrams.txt
# 構文エラーを目視確認
cat extracted-diagrams.txt
誤り:
C4Context
title: System Context Diagram
修正:
C4Context
title System Context Diagram
誤り:
sequenceDiagram
User->Frontend: リクエスト
修正:
sequenceDiagram
User->>Frontend: リクエスト
誤り:
graph TB
subgraph "Production"
A[Pod 1]
end
修正:
graph TB
subgraph "Production"
A[Pod 1]
end
誤り:
erDiagram
USER -> ORDER : places
修正:
erDiagram
USER ||--o{ ORDER : places
->> に統一（同期呼び出し）-->> を使用name: Mermaid Validation
on:
pull_request:
paths:
- 'docs/**/*.md'
- '**/*.md'
jobs:
validate-mermaid:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '20'
- name: Validate Mermaid Diagrams
run: |
npm install -g @mermaid-js/mermaid-cli
find . -name "*.md" -exec sh -c '
grep -l "```mermaid" "$1" && {
echo "Validating $1"
mmdc -i "$1" -o /tmp/test.svg || exit 1
}
' _ {} \;
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.