Infographics Mermaid.js

Installation
SKILL.md

Creative Methodology for Infographic-Style Mermaid.js

Core Philosophy: Beyond Boxes and Arrows

Mermaid.js is traditionally used for technical flowcharts, but its true potential unlocks when treated as a declarative infographic engine. The goal is not just to map a process, but to create a visually appealing, highly intuitive representation of a concept that engages the viewer instantly.

Instead of asking: "How do I connect node A to node B?" Ask: "How can I visually represent this concept so it feels like a story or a physical reality?"

Creative Principles

1. Metaphorical Representation (Emojis as Actors)

Ditch the standard generic shapes (rectangles, diamonds) when representing real-world entities. Use emojis as the core visual actors within simple nodes to give life and relatability to the diagram.

  • Example: Instead of a box saying "Data Point", use ((👤)) to represent individuals in a population.

2. Visual Storytelling and Thematic Flow

A great diagram tells a story. Use connecting arrows and edge labels not just for technical relationships, but for narrative actions.

  • Example: Instead of a simple arrow -->, use a thematic transition with an icon like ===>|" 🎲 Equiprobable Selection "| to show how the change happens.
Related skills
Installs
First Seen