跳到正文
cccskills
免费在 GitHub 公开

mermaid-visualizer

Convert text into Mermaid diagrams, which describe visual structures using code. Create process flows, comparisons, mind maps, and system interactions for presentations or documentation, with adjustable layouts and checks for common syntax mistakes.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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.

集成工具Obsidian

实测评分 未实测

查看安装方法

适用场景

  • Turn sales procedures into a flowchart
  • Compare two approaches visually
  • Organize concepts in a mind map
  • Document the order of API interactions

包含的文件(2)

  • SKILL.md8.7 KB
  • references/syntax-rules.md9.8 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Mermaid Visualizer

Overview

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.

Quick Start

When creating a Mermaid diagram:

  1. Analyze the content - Identify key concepts, relationships, and flow
  2. Choose diagram type - Select the most appropriate visualization (see Diagram Types below)
  3. Select configuration - Determine layout, detail level, and styling
  4. Generate diagram - Create syntactically correct Mermaid code
  5. Output in markdown - Wrap in proper code fence with optional explanation

Default assumptions:

  • Vertical layout (TB) unless horizontal requested
  • Medium detail level (balanced between simplicity and information)
  • Professional color scheme with semantic colors
  • Obsidian/GitHub compatible syntax

Diagram Types

1. Process Flow (graph TB/LR)

Best for: Workflows, decision trees, sequential processes, AI agent architectures

Use when: Content describes steps, stages, or a sequence of actions

Key features:

  • Swimlanes via subgraph for grouping related steps
  • Arrow labels for transitions
  • Feedback loops and branches
  • Color-coded stages

Configuration options:

  • layout: "vertical" (TB), "horizontal" (LR)
  • detail: "simple" (core steps only), "standard" (with descriptions), "detailed" (with annotations)
  • style: "minimal", "professional", "colorful"

2. Circular Flow (graph TD with circular layout)

Best for: Cyclic processes, continuous improvement loops, agent feedback systems

Use when: Content emphasizes iteration, feedback, or circular relationships

Key features:

  • Central hub with radiating elements
  • Curved feedback arrows
  • Clear cycle indicators

3. Comparison Diagram (graph TB with parallel paths)

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:

  • Side-by-side layout
  • Central comparison node
  • Clear differentiation via color/style

4. Mindmap

Best for: Hierarchical concepts, knowledge organization, topic breakdowns

Use when: Content is hierarchical with clear parent-child relationships

Key features:

  • Radial tree structure
  • Multiple levels of nesting
  • Clean visual hierarchy

5. Sequence Diagram

Best for: Interactions between components, API calls, message flows

Use when: Content involves communication between actors/systems over time

Key features:

  • Timeline-based layout
  • Clear actor separation
  • Activation boxes for processes

6. State Diagram

Best for: System states, status transitions, lifecycle stages

Use when: Content describes states and transitions between them

Key features:

  • Clear state nodes
  • Labeled transitions
  • Start and end states

Critical Syntax Rules

Always follow these rules to prevent parsing errors:

Rule 1: Avoid List Syntax Conflicts

❌ 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

Rule 2: Subgraph Naming

❌ 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

Rule 3: Node References

❌ WRONG: Title --> AI Agent Core  → Reference display name directly
✅ RIGHT: Title --> agent          → Reference subgraph ID

Rule 4: Special Characters in Node Text

✅ 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))

Rule 5: Arrow Types

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

Configuration Options

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 labels
  • standard: Balanced detail with key descriptions (default)
  • detailed: Full annotations, explanations, and metadata
  • presentation: Optimized for slides (larger text, fewer details)

Style:

  • minimal: Monochrome, clean lines
  • professional: Semantic colors, clear hierarchy (default)
  • colorful: Vibrant colors, high contrast
  • academic: Formal styling for papers/documentation

Additional Options:

  • show_legend: true/false - Include color/symbol legend
  • numbered: true/false - Add sequence numbers to steps
  • title: string - Add diagram title

Example Usage Patterns

Pattern 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]

Workflow

  1. Understand the content

    • Identify main concepts, entities, and relationships
    • Determine hierarchy or sequence
    • Note any comparisons or contrasts
  2. Select diagram type

    • Match content structure to diagram type
    • Consider user's presentation context
    • Default to process flow if ambiguous
  3. Choose configuration

    • Apply user-specified options
    • Use sensible defaults for unspecified options
    • Optimize for readability
  4. Generate Mermaid code

    • Follow all syntax rules strictly
    • Use semantic naming (descriptive IDs)
    • Apply consistent styling
    • Test for common errors:
      • No "number. space" patterns in node text
      • All subgraphs use ID["display name"] format
      • All node references use IDs not display names
  5. Output with context

    • Wrap in ```mermaid code fence
    • Add brief explanation of diagram structure
    • Mention rendering compatibility (Obsidian, GitHub, etc.)
    • Offer to adjust or create variations

Color Scheme Defaults

Standard professional palette:

  • Green (#d3f9d8/#2f9e44): Input, perception, start states
  • Red (#ffe3e3/#c92a2a): Planning, decision points
  • Purple (#e5dbff/#5f3dc4): Processing, reasoning
  • Orange (#ffe8cc/#d9480f): Actions, tool usage
  • Cyan (#c5f6fa/#0c8599): Output, execution, results
  • Yellow (#fff4e6/#e67700): Storage, memory, data
  • Pink (#f3d9fa/#862e9c): Learning, optimization
  • Blue (#e7f5ff/#1971c2): Metadata, definitions, titles
  • Gray (#f8f9fa/#868e96): Neutral elements, traditional systems

Common Patterns

Swimlane Pattern (Grouping)

graph TB
    subgraph core["Core Process"]
        A --> B --> C
    end
    subgraph support["Supporting Systems"]
        D
        E
    end
    core -.-> support

Feedback Loop Pattern

graph TB
    A[Start] --> B[Process]
    B --> C[End]
    C -.->|Feedback| A

Hub and Spoke Pattern

graph TB
    Central[Hub]
    A[Spoke 1] --> Central
    B[Spoke 2] --> Central
    C[Spoke 3] --> Central

Quality Checklist

Before outputting, verify:

  • No "number. space" patterns in any node text
  • All subgraphs use proper ID syntax
  • All arrows use correct syntax (-->, -.->)
  • Colors applied consistently
  • Layout direction specified
  • Style declarations present
  • No ambiguous node references
  • Compatible with Obsidian/GitHub renderers
  • No Emoji in any node text - use text labels or color coding instead

References

For detailed syntax rules and troubleshooting, see:

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

defuddle

免费

Extract readable Markdown from web pages with Defuddle CLI, removing ads and navigation to reduce token usage. Save the content to a file or retrieve metadata such as titles, descriptions, and domains.

中文简介正在准备中。当前显示英语简介。

  • Extract article text for reading and analysis
  • Save web documentation as Markdown
  • Retrieve a page title, description, or domain
breferrari/obsidian-mind54192026年10月18日 更新

Turn written content into Excalidraw flowcharts, mind maps, and other diagrams. Save files for Obsidian, edit them on excalidraw.com, or add drawing order information for use with an external animation tool.

中文简介正在准备中。当前显示英语简介。

  • Turn workflow descriptions into flowcharts
  • Organize ideas in a mind map
  • Create diagrams for Obsidian notes
breferrari/obsidian-mind54192026年10月18日 更新

Create and edit .canvas files for visual planning in tools such as Obsidian. Arrange text, files, and links into mind maps or flowcharts, connect related items, and check that the file structure remains valid.

中文简介正在准备中。当前显示英语简介。

  • Organizing ideas into a mind map
  • Mapping a workflow as a flowchart
  • Grouping research notes and links
breferrari/obsidian-mind54192026年10月18日 更新

Create and edit Obsidian Bases files to organize notes into tables, cards, and lists. Filter notes by tags or properties, calculate values such as days until a deadline, and configure grouping and summaries.

中文简介正在准备中。当前显示英语简介。

  • Build a task table with deadlines and status
  • Organize books and articles into reading cards
  • Create an index of daily notes
breferrari/obsidian-mind54192026年10月18日 更新

Use the Obsidian command-line interface to read, create, and search notes, manage tasks and properties, and work with specific vaults. It also supports plugin and theme debugging through error checks, screenshots, and interface inspection.

中文简介正在准备中。当前显示英语简介。

  • Find and update notes in a vault
  • Add tasks to a daily note
  • Update note properties
breferrari/obsidian-mind54192026年10月18日 更新

Create and edit Obsidian Markdown notes with links between notes, embedded images and PDFs, highlighted callout boxes, tags, and properties. Use Obsidian-specific formatting to connect related material and organize information within notes.

中文简介正在准备中。当前显示英语简介。

  • Connect related notes and specific sections with internal links
  • Embed notes, images, and PDF pages
  • Highlight warnings and key points with callout boxes
breferrari/obsidian-mind54192026年10月18日 更新

查看 breferrari 的全部技能

报告此技能的问题