infographics mermaid skill

---
name: Infographics Mermaid.js
description: A creative methodology for using Mermaid.js to create visually engaging, infographic-style diagrams that go
---

# 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.

### 3. The Power of Contrast and "Muting"
Guide the viewer's attention by explicitly "muting" irrelevant or background information and highlighting the subjects of interest.
- Create contrasting `classDef` styles: a `neutral` style (grayed out, muted colors) for background context, and vibrant, bold styles (`selected`, `sampled`) for the focal points.
- This creates an immediate visual hierarchy without needing extra text. The viewer instantly knows what matters.

### 4. Implicit Grids and Spatial Organization
Do not let the rendering engine throw nodes wherever it wants. Force spatial organization to create clean, matrix-like layouts that are pleasing to the eye.
- Use invisible links (`~~~`) to structure nodes into deliberate rows and columns within subgraphs.
- This mimics physical groupings (like people in a crowd or items in a box) and creates a profound sense of order.

### 5. Semantic Containers (Subgraphs as Context)
Use `subgraph` not just to group things, but to represent environments, containers, or states.
- Style the subgraphs with soft background colors, rounded corners (`rx, ry`), and distinct borders (e.g., dashed for a conceptual pool, solid for a concrete result) to give them a physical presence.
- Give them expressive titles with emojis and variables, e.g., `["👥 Total Population (N=12)"]`.

### 6. Tracking Identity (The "Aha!" Moment)
When explaining transformations or extractions, maintain the identity of the elements.
- *Example:* If you select individuals 2, 7, 9, and 12 from a population, ensure those exact numbers appear in the resulting sample. This turns an abstract diagram into a concrete, verifiable proof of concept.

### 7. Beautiful Code = Beautiful Design
The creative process extends to the code itself. The Mermaid code should be as structured and readable as the final output.
- Use ASCII banners and comments to divide the code into logical sections (1. Classes, 2. Structure, 3. Flow, 4. Styling).
- Align nodes and links symmetrically in your text editor. If the source code looks meticulously organized, the resulting diagram almost always shares that aesthetic.

## The Workflow

1. **Conceptualize:** What is the real-world equivalent of this concept? 
2. **Define the Actors:** What emojis/icons best represent the entities?
3. **Establish the Palette:** Choose a color scheme with clear contrast (Neutral vs. Active).
4. **Draft the Grid:** Use invisible links (`~~~`) to build the physical layout of the actors within their containers.
5. **Connect the Narrative:** Draw the main relationship between the distinct states/containers using expressive edge labels.
6. **Polish and Refine:** Adjust stroke widths, corner radiuses, and spacing. Add `accTitle` and `accDescr` to clarify the ultimate intent of the graphic.

## Technical Best Practices for Mermaid.js

While the focus is on creativity, the foundation must be technically sound. Always adhere to these structural rules:

### 1. Maintain Consistent Flow
Use `flowchart TD` (Top-Down) for hierarchical or structural processes, and `flowchart LR` (Left-to-Right) for timelines, sequential steps, or narrative transformations. Avoid mixing directions globally.

### 2. Accessibility is Mandatory
Always include accessibility metadata at the very beginning of the diagram. This not only helps screen readers but provides clear, self-documenting intent.
- `accTitle`: A concise title for the diagram.
- `accDescr`: A full sentence describing the diagram's content and purpose.

### 3. Centralized Styling (`classDef`)
Never style individual nodes manually if the style is used more than once. Define reusable visual themes using `classDef` at the top of the diagram and apply them using `:::className`.
- *Example:* `classDef highlight fill:#bbdefb,stroke:#1e88e5,stroke-width:3px`

### 4. Meaningful Identifiers
Use short, alphanumeric, and semantic IDs for nodes (e.g., `Pop01`, `Samp01` instead of `A`, `B`, or `node1`). This makes defining relationships further down the code intuitive and prevents "silent" node creation errors.

### 5. Proper String Escaping
When node labels contain special characters, spaces, or complex formatting, always wrap them in double quotes.
- *Example:* `NodeID["Complex Label (with parentheses)"]`

### 6. Avoid Reserved Keywords
Never use reserved words like `end` as a lowercase node ID or label, as it will break the rendering engine. If you must use the word, capitalize it (`End`) or wrap it in quotes (`"end"`).