Convierte texto en diagramas Mermaid profesionales para presentaciones y documentación. Úsalo para visualizar conceptos, crear flowcharts o hacer diagramas desde texto, con prevención de errores de sintaxis.
en todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
75 tok en reposo
19 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add axtonliu/axton-obsidian-visual-skills --skill mermaid-visualizer --agent claude-codeSe instala solo en este repositorio.
Di cualquiera de estas frases y el agente debería cargar este skill.
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:
Reproducido de axtonliu/axton-obsidian-visual-skills bajo licencia MIT. Leer esta página en markdown.
2 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
Este repo incluye 3 skills. Si instalas uno, normalmente ya tienes los demás.
Genera diagramas Excalidraw a partir de texto, en tres modos: Obsidian (.md), Standard (.excalidraw) y Animated (.excalidraw con orden de animación). Se activa con 'Excalidraw', '画图', '流程图', 'diagram', 'animate'.
Crea archivos Obsidian Canvas a partir de texto, con layouts de mapa mental o libres. Úsalo cuando quieran visualizar contenido como canvas interactivo, crear mapas mentales u organizar información espacialmente en formato Obsidian.
Crea arte algorítmico con p5.js, aleatoriedad con semilla y exploración interactiva de parámetros. Úsalo cuando pidan arte por código, arte generativo, flow fields o sistemas de partículas.
Aplica los colores y la tipografía oficiales de la marca Anthropic a cualquier artefacto que pueda beneficiarse de su look-and-feel. Úsalo cuando apliquen colores de marca o estándares de diseño.
Crea arte visual en documentos .png y .pdf partiendo de una filosofía de diseño. Úsalo cuando pidan un póster, una pieza de arte, un diseño u otra pieza estática.
