markdown-mermaidlisted

Author markdown and Mermaid diagrams that render correctly in VS Code, GitHub, and other Mermaid 10+ consumers — covers diagram-tool selection, mandatory init template, parser pitfalls, and visual design rules. Use when writing technical docs with embedded diagrams, debugging Mermaid render failures, or choosing between Mermaid, Excalidraw, and other diagramming tools.
fabioc-aloha/Alex_ACT_Edition · ★ 0 · AI & Automation · score 75

Install: claude install-skill fabioc-aloha/Alex_ACT_Edition

# Markdown & Mermaid A skill for markdown authoring, Mermaid diagramming, multi-tool visualization, VS Code integration, and cross-platform rendering consistency. ## When to Use - Creating technical documentation with diagrams - Choosing the right diagramming tool for your audience - Troubleshooting Mermaid rendering issues - Styling markdown previews in VS Code - Converting unicode escapes to proper emojis - Enterprise documentation with visual standards - **Interactive diagrams in VS Code chat** (1.109+) --- ## ⚠️ MANDATORY: Start Every Diagram With This Template **Do NOT write Mermaid code without this template.** Copy-paste first, then customize: ```text %%{init: {'theme': 'base', 'themeVariables': {'lineColor': '#57606a', 'primaryColor': '#ddf4ff', 'primaryBorderColor': '#0969da', 'primaryTextColor': '#1f2328', 'edgeLabelBackground': '#ffffff'}}}%% flowchart LR A[Input]:::blue --> B[Process]:::purple --> C[Output]:::green classDef blue fill:#ddf4ff,color:#0550ae,stroke:#80ccff classDef green fill:#d3f5db,color:#1a7f37,stroke:#6fdd8b classDef purple fill:#d8b9ff,color:#6639ba,stroke:#bf8aff classDef gold fill:#fff8c5,color:#9a6700,stroke:#d4a72c classDef red fill:#ffebe9,color:#cf222e,stroke:#f5a3a3 classDef neutral fill:#eaeef2,color:#24292f,stroke:#d0d7de linkStyle default stroke:#57606a,stroke-width:1.5px ``` **Three required components:** 1. **Init directive** (line 1) — Sets theme, colors, white edge label background 2. **cl