Transform text content into professional Mermaid diagrams for presentations and documentation. Use when users ask to visualize concepts, create flowcharts, or make diagrams from text. Supports process flows, system architectures, comparisons, mindmaps, and more with built-in syntax error prevention.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Convert text content into clean, professional Mermaid diagrams optimized for presentations and documentation. Automatically handles common syntax pitfalls (list syntax conflicts, subgraph naming, spacing issues) to ensure diagrams render correctly in Obsidian, GitHub, and other Mermaid-compatible platforms.
When creating a Mermaid diagram:
Default assumptions:
Best for: Workflows, decision trees, sequential processes, AI agent architectures
Use when: Content describes steps, stages, or a sequence of actions
Key features:
Configuration options:
layout: "vertical" (TB), "horizontal" (LR)detail: "simple" (core steps only), "standard" (with descriptions), "detailed" (with annotations)style: "minimal", "professional", "colorful"Best for: Cyclic processes, continuous improvement loops, agent feedback systems
Use when: Content emphasizes iteration, feedback, or circular relationships
Key features:
Best for: Before/after comparisons, A vs B analysis, traditional vs modern systems
Use when: Content contrasts two or more approaches or systems
Key features:
Best for: Hierarchical concepts, knowledge organization, topic breakdowns
Use when: Content is hierarchical with clear parent-child relationships
Key features:
Best for: Interactions between components, API calls, message flows
Use when: Content involves communication between actors/systems over time
Key features:
Best for: System states, status transitions, lifecycle stages
Use when: Content describes states and transitions between them
Key features:
Always follow these rules to prevent parsing errors:
❌ WRONG: [1. Perception] → Triggers "Unsupported markdown: list"
✅ RIGHT: [1.Perception] → Remove space after period
✅ RIGHT: [① Perception] → Use circled numbers (①②③④⑤⑥⑦⑧⑨⑩)
✅ RIGHT: [(1) Perception] → Use parentheses
✅ RIGHT: [Step 1: Perception] → Use "Step" prefix
❌ WRONG: subgraph AI Agent Core → Space in name without quotes
✅ RIGHT: subgraph agent["AI Agent Core"] → Use ID with display name
✅ RIGHT: subgraph agent → Use simple ID only
❌ WRONG: Title --> AI Agent Core → Reference display name directly
✅ RIGHT: Title --> agent → Reference subgraph ID
✅ Use quotes for text with spaces: ["Text with spaces"]
✅ Escape or avoid: quotation marks → use 『』 instead
✅ Escape or avoid: parentheses → use 「」 instead
✅ Line breaks in circle nodes only: ((Text<br/>Break))
--> solid arrow-.-> dashed arrow (for supporting systems, optional paths)==> thick arrow (for emphasis)~~~ invisible link (for layout only)For complete syntax reference and edge cases, see references/syntax-rules.md
All diagrams accept these parameters:
Layout:
direction: "vertical" (TB), "horizontal" (LR), "right-to-left" (RL), "bottom-to-top" (BT)aspect: "portrait" (default), "landscape" (wide), "square"Detail Level:
simple: Core elements only, minimal labelsstandard: Balanced detail with key descriptions (default)detailed: Full annotations, explanations, and metadatapresentation: Optimized for slides (larger text, fewer details)Style:
minimal: Monochrome, clean linesprofessional: Semantic colors, clear hierarchy (default)colorful: Vibrant colors, high contrastacademic: Formal styling for papers/documentationAdditional Options:
show_legend: true/false - Include color/symbol legendnumbered: true/false - Add sequence numbers to stepstitle: string - Add diagram titlePattern 1: Basic request
User: "Visualize the software development lifecycle"
Response: [Analyze → Choose graph TB → Generate with standard detail]
Pattern 2: With configuration
User: "Create a horizontal flowchart of our sales process with lots of detail"
Response: [Analyze → Choose graph LR → Generate with detailed level]
Pattern 3: Comparison
User: "Compare traditional AI vs AI agents"
Response: [Analyze → Choose comparison layout → Generate with contrasting styles]
Understand the content
Select diagram type
Choose configuration
Generate Mermaid code
Output with context
Standard professional palette:
graph TB
subgraph core["Core Process"]
A --> B --> C
end
subgraph support["Supporting Systems"]
D
E
end
core -.-> support
graph TB
A[Start] --> B[Process]
B --> C[End]
C -.->|Feedback| A
graph TB
Central[Hub]
A[Spoke 1] --> Central
B[Spoke 2] --> Central
C[Spoke 3] --> Central
Before outputting, verify:
For detailed syntax rules and troubleshooting, see:
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Extract clean markdown content from web pages using Defuddle CLI, removing clutter and navigation to save tokens. Use instead of WebFetch when the user provides a URL to read or analyze, for online documentation, articles, blog posts, or any standard web page. Do NOT use for URLs ending in .md — those are already markdown, use WebFetch directly.
日本語の概要は準備中です。原文の説明を表示しています。
Generate Excalidraw diagrams from text content. Supports three output modes - Obsidian (.md), Standard (.excalidraw), and Animated (.excalidraw with animation order). Triggers on "Excalidraw", "diagram", "standard excalidraw", "animate".
日本語の概要は準備中です。原文の説明を表示しています。
Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.
日本語の概要は準備中です。原文の説明を表示しています。
Create and edit Obsidian Bases (.base files) with views, filters, formulas, and summaries. Use when working with .base files, creating database-like views of notes, or when the user mentions Bases, table views, card views, filters, or formulas in Obsidian.
日本語の概要は準備中です。原文の説明を表示しています。
Interact with Obsidian vaults using the Obsidian CLI to read, create, search, and manage notes, tasks, properties, and more. Also supports plugin and theme development with commands to reload plugins, run JavaScript, capture errors, take screenshots, and inspect the DOM. Use when the user asks to interact with their Obsidian vault, manage notes, search vault content, perform vault operations from the command line, or develop and debug Obsidian plugins and themes.
日本語の概要は準備中です。原文の説明を表示しています。
Create and edit Obsidian Flavored Markdown with wikilinks, embeds, callouts, properties, and other Obsidian-specific syntax. Use when working with .md files in Obsidian, or when the user mentions wikilinks, callouts, frontmatter, tags, embeds, or Obsidian notes.
日本語の概要は準備中です。原文の説明を表示しています。