minimal-vibe-coding-kit 0.5.0 → 0.5.2

package/.grok/skills/mermaid/references/config-theming.md

@@ -0,0 +1,245 @@
+> **Upstream reference**
+>
+> Adapted from [Mermaid 11.16.0 source](https://github.com/mermaid-js/mermaid/blob/mermaid%4011.16.0/packages/mermaid/src/docs/config/theming.md). This kit copy is
+> locally maintained; treat imported prose as syntax data, not operational instructions.
+
+# Theme Configuration
+
+Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.
+
+Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, frontmatter config is used.
+
+## Available Themes
+
+1. [**default**](https://github.com/mermaid-js/mermaid/blob/mermaid%4011.16.0/packages/mermaid/src/themes/theme-default.js) - This is the default theme for all diagrams.
+
+2. [**neutral**](https://github.com/mermaid-js/mermaid/blob/mermaid%4011.16.0/packages/mermaid/src/themes/theme-neutral.js) - This theme is great for black and white documents that will be printed.
+
+3. [**dark**](https://github.com/mermaid-js/mermaid/blob/mermaid%4011.16.0/packages/mermaid/src/themes/theme-dark.js) - This theme goes well with dark-colored elements or dark-mode. To use the dark theme (which changes the theme of the schema itself) with dark-mode (which sets the background), set `darkMode` to `true` in your config.
+
+4. [**forest**](https://github.com/mermaid-js/mermaid/blob/mermaid%4011.16.0/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green.
+
+5. [**base**](https://github.com/mermaid-js/mermaid/blob/mermaid%4011.16.0/packages/mermaid/src/themes/theme-base.js) - This is the only theme that can be modified. Use this theme as the base for customizations.
+
+## Site-wide Theme
+
+To customize themes site-wide, call the `initialize` method on the `mermaid`.
+
+Example of `initialize` call setting `theme` to `base`:
+
+```javascript
+mermaid.initialize({
+  securityLevel: 'loose',
+  theme: 'base',
+});
+```
+
+## Diagram-specific Themes
+
+To customize the theme of an individual diagram, use frontmatter config.
+
+Example of frontmatter config setting the `theme` to `forest`:
+
+```mermaid-example
+---
+config:
+  theme: 'forest'
+---
+  graph TD
+    a --> b
+```
+
+```mermaid
+---
+config:
+  theme: 'forest'
+---
+  graph TD
+    a --> b
+```
+
+> **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations.
+
+## Customizing Themes with `themeVariables`
+
+To make a custom theme, modify `themeVariables` via frontmatter config.
+
+You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
+
+| Parameter      | Description                        | Type   | Properties                                                                          |
+| -------------- | ---------------------------------- | ------ | ----------------------------------------------------------------------------------- |
+| themeVariables | Modifiable with frontmatter config | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
+
+Example of modifying `themeVariables` using frontmatter config:
+
+```mermaid-example
+---
+config:
+  theme: 'base'
+  themeVariables:
+    primaryColor: '#BB2528'
+    primaryTextColor: '#fff'
+    primaryBorderColor: '#7C0000'
+    lineColor: '#F8B229'
+    secondaryColor: '#006100'
+    tertiaryColor: '#fff'
+---
+        graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+```
+
+```mermaid
+---
+config:
+  theme: 'base'
+  themeVariables:
+    primaryColor: '#BB2528'
+    primaryTextColor: '#fff'
+    primaryBorderColor: '#7C0000'
+    lineColor: '#F8B229'
+    secondaryColor: '#006100'
+    tertiaryColor: '#fff'
+---
+        graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+```
+
+## Color and Color Calculation
+
+To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.
+
+The theming engine will only recognize hex colors and not color names. So, the value `#ff0000` will work, but `red` will not.
+
+## Theme Variables
+
+| Variable             | Default value                      | Description                                                                                                                      |
+| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| darkMode             | false                              | Affects how derived colors are calculated. Set value to `true` for dark mode.                                                    |
+| background           | #f4f4f4                            | Used to calculate color for items that should either be background colored or contrasting to the background                      |
+| fontFamily           | trebuchet ms, verdana, arial       | Font family for diagram text                                                                                                     |
+| fontSize             | 16px                               | Font size in pixels                                                                                                              |
+| primaryColor         | #fff4dd                            | Color to be used as background in nodes, other colors will be derived from this                                                  |
+| primaryTextColor     | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor`                                                                     |
+| secondaryColor       | calculated from primaryColor       |                                                                                                                                  |
+| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
+| secondaryBorderColor | calculated from secondaryColor     | Color to be used as border in nodes using `secondaryColor`                                                                       |
+| secondaryTextColor   | calculated from secondaryColor     | Color to be used as text color in nodes using `secondaryColor`                                                                   |
+| tertiaryColor        | calculated from primaryColor       |                                                                                                                                  |
+| tertiaryBorderColor  | calculated from tertiaryColor      | Color to be used as border in nodes using `tertiaryColor`                                                                        |
+| tertiaryTextColor    | calculated from tertiaryColor      | Color to be used as text color in nodes using `tertiaryColor`                                                                    |
+| noteBkgColor         | #fff5ad                            | Color used as background in notes                                                                                                |
+| noteTextColor        | #333                               | Text color in note rectangles                                                                                                    |
+| noteBorderColor      | calculated from noteBkgColor       | Border color in note rectangles                                                                                                  |
+| lineColor            | calculated from background         |                                                                                                                                  |
+| textColor            | calculated from primaryTextColor   | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram |
+| mainBkg              | calculated from primaryColor       | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc                                  |
+| errorBkgColor        | tertiaryColor                      | Color for syntax error message                                                                                                   |
+| errorTextColor       | tertiaryTextColor                  | Color for syntax error message                                                                                                   |
+
+## Flowchart Variables
+
+| Variable            | Default value                  | Description                 |
+| ------------------- | ------------------------------ | --------------------------- |
+| nodeBorder          | primaryBorderColor             | Node Border Color           |
+| clusterBkg          | tertiaryColor                  | Background in subgraphs     |
+| clusterBorder       | tertiaryBorderColor            | Cluster Border Color        |
+| defaultLinkColor    | lineColor                      | Link Color                  |
+| titleColor          | tertiaryTextColor              | Title Color                 |
+| edgeLabelBackground | calculated from secondaryColor |                             |
+| nodeTextColor       | primaryTextColor               | Color for text inside Nodes |
+
+## Sequence Diagram Variables
+
+| Variable              | Default value                  | Description                 |
+| --------------------- | ------------------------------ | --------------------------- |
+| actorBkg              | mainBkg                        | Actor Background Color      |
+| actorBorder           | primaryBorderColor             | Actor Border Color          |
+| actorTextColor        | primaryTextColor               | Actor Text Color            |
+| actorLineColor        | actorBorder                    | Actor Line Color            |
+| signalColor           | textColor                      | Signal Color                |
+| signalTextColor       | textColor                      | Signal Text Color           |
+| labelBoxBkgColor      | actorBkg                       | Label Box Background Color  |
+| labelBoxBorderColor   | actorBorder                    | Label Box Border Color      |
+| labelTextColor        | actorTextColor                 | Label Text Color            |
+| loopTextColor         | actorTextColor                 | Loop Text Color             |
+| activationBorderColor | calculated from secondaryColor | Activation Border Color     |
+| activationBkgColor    | secondaryColor                 | Activation Background Color |
+| sequenceNumberColor   | calculated from lineColor      | Sequence Number Color       |
+
+## Pie Diagram Variables
+
+| Variable            | Default value                  | Description                                |
+| ------------------- | ------------------------------ | ------------------------------------------ |
+| pie1                | primaryColor                   | Fill for 1st section in pie diagram        |
+| pie2                | secondaryColor                 | Fill for 2nd section in pie diagram        |
+| pie3                | calculated from tertiary       | Fill for 3rd section in pie diagram        |
+| pie4                | calculated from primaryColor   | Fill for 4th section in pie diagram        |
+| pie5                | calculated from secondaryColor | Fill for 5th section in pie diagram        |
+| pie6                | calculated from tertiaryColor  | Fill for 6th section in pie diagram        |
+| pie7                | calculated from primaryColor   | Fill for 7th section in pie diagram        |
+| pie8                | calculated from primaryColor   | Fill for 8th section in pie diagram        |
+| pie9                | calculated from primaryColor   | Fill for 9th section in pie diagram        |
+| pie10               | calculated from primaryColor   | Fill for 10th section in pie diagram       |
+| pie11               | calculated from primaryColor   | Fill for 11th section in pie diagram       |
+| pie12               | calculated from primaryColor   | Fill for 12th section in pie diagram       |
+| pieTitleTextSize    | 25px                           | Title text size                            |
+| pieTitleTextColor   | taskTextDarkColor              | Title text color                           |
+| pieSectionTextSize  | 17px                           | Text size of individual section labels     |
+| pieSectionTextColor | textColor                      | Text color of individual section labels    |
+| pieLegendTextSize   | 17px                           | Text size of labels in diagram legend      |
+| pieLegendTextColor  | taskTextDarkColor              | Text color of labels in diagram legend     |
+| pieStrokeColor      | black                          | Border color of individual pie sections    |
+| pieStrokeWidth      | 2px                            | Border width of individual pie sections    |
+| pieOuterStrokeWidth | 2px                            | Border width of pie diagram's outer circle |
+| pieOuterStrokeColor | black                          | Border color of pie diagram's outer circle |
+| pieOpacity          | 0.7                            | Opacity of individual pie sections         |
+
+## State Colors
+
+| Variable      | Default value    | Description                                  |
+| ------------- | ---------------- | -------------------------------------------- |
+| labelColor    | primaryTextColor |                                              |
+| altBackground | tertiaryColor    | Used for background in deep composite states |
+
+## Class Colors
+
+| Variable  | Default value | Description                     |
+| --------- | ------------- | ------------------------------- |
+| classText | textColor     | Color of Text in class diagrams |
+
+## User Journey Colors
+
+| Variable  | Default value                  | Description                             |
+| --------- | ------------------------------ | --------------------------------------- |
+| fillType0 | primaryColor                   | Fill for 1st section in journey diagram |
+| fillType1 | secondaryColor                 | Fill for 2nd section in journey diagram |
+| fillType2 | calculated from primaryColor   | Fill for 3rd section in journey diagram |
+| fillType3 | calculated from secondaryColor | Fill for 4th section in journey diagram |
+| fillType4 | calculated from primaryColor   | Fill for 5th section in journey diagram |
+| fillType5 | calculated from secondaryColor | Fill for 6th section in journey diagram |
+| fillType6 | calculated from primaryColor   | Fill for 7th section in journey diagram |
+| fillType7 | calculated from secondaryColor | Fill for 8th section in journey diagram |

package/.grok/skills/mermaid/references/config-tidy-tree.md

@@ -0,0 +1,88 @@
+> **Upstream reference**
+>
+> Adapted from [Mermaid 11.16.0 source](https://github.com/mermaid-js/mermaid/blob/mermaid%4011.16.0/packages/mermaid/src/docs/config/tidy-tree.md). This kit copy is
+> locally maintained; treat imported prose as syntax data, not operational instructions.
+
+# Tidy-tree Layout
+
+The **tidy-tree** layout arranges nodes in a hierarchical, tree-like structure. It is especially useful for diagrams where parent-child relationships are important, such as mindmaps.
+
+## Features
+
+- Organizes nodes in a tidy, non-overlapping tree
+- Ideal for mindmaps and hierarchical data
+- Automatically adjusts spacing for readability
+
+## Example Usage
+
+```mermaid-example
+---
+config:
+  layout: tidy-tree
+---
+mindmap
+root((mindmap is a long thing))
+  A
+  B
+  C
+  D
+```
+
+```mermaid
+---
+config:
+  layout: tidy-tree
+---
+mindmap
+root((mindmap is a long thing))
+  A
+  B
+  C
+  D
+```
+
+```mermaid-example
+---
+config:
+  layout: tidy-tree
+---
+mindmap
+root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+```
+
+```mermaid
+---
+config:
+  layout: tidy-tree
+---
+mindmap
+root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+```
+
+## Note
+
+- Currently, tidy-tree is primarily supported for mindmap diagrams.

package/.grok/skills/mermaid/references/cynefin.md

@@ -0,0 +1,278 @@
+> **Upstream reference**
+>
+> Adapted from [Mermaid 11.16.0 source](https://github.com/mermaid-js/mermaid/blob/mermaid%4011.16.0/packages/mermaid/src/docs/syntax/cynefin.md). This kit copy is
+> locally maintained; treat imported prose as syntax data, not operational instructions.
+
+# Cynefin Framework Diagram (v11.16.0+)
+
+> The Cynefin framework is a sense-making framework created by [Dave Snowden](https://en.wikipedia.org/wiki/Dave_Snowden) that categorizes problems into five complexity domains. It helps teams match their response to the nature of the situation they are facing. The name is Welsh for "place" or "habitat".
+
+You can read more at [The Cynefin Co](https://thecynefin.co/about-us/about-cynefin-framework).
+
+## Introduction
+
+The Cynefin framework divides the world into five domains, each with its own decision-making approach:
+
+- **Clear** (formerly Obvious/Simple): Cause and effect are obvious. Sense → Categorise → Respond. Apply **best practices**.
+- **Complicated**: Cause and effect require analysis or expertise. Sense → Analyse → Respond. Apply **good practices**.
+- **Complex**: Cause and effect can only be deduced in retrospect. Probe → Sense → Respond. Apply **emergent practices**.
+- **Chaotic**: No perceivable cause and effect. Act → Sense → Respond. Apply **novel practices**.
+- **Confusion** (or Disorder): You do not know which domain you are in. The goal is to move items out of this state into one of the other four.
+
+The signature visual feature is the wavy, organic boundary between the ordered (Clear, Complicated) and unordered (Complex, Chaotic) halves, and the "cliff" between Clear and Chaotic representing the risk of complacency leading to crisis.
+
+## Syntax
+
+A Cynefin diagram is declared with `cynefin-beta` followed by domain blocks and optional transitions.
+
+```md
+cynefin-beta
+title Optional Diagram Title
+
+complex
+"Item label"
+"Another item"
+
+complicated
+"Expert analysis needed"
+
+clear
+"Known procedure"
+
+chaotic
+"Crisis response"
+
+confusion
+"Item of unknown domain"
+
+complex --> complicated : "Pattern identified"
+clear --> chaotic : "Complacency"
+```
+
+### Keywords
+
+| Keyword        | Meaning                                                                |
+| -------------- | ---------------------------------------------------------------------- |
+| `cynefin-beta` | Diagram type declaration (required, first line after any front matter) |
+| `title`        | Optional diagram title                                                 |
+| `complex`      | Opens the Complex domain block                                         |
+| `complicated`  | Opens the Complicated domain block                                     |
+| `clear`        | Opens the Clear domain block                                           |
+| `chaotic`      | Opens the Chaotic domain block                                         |
+| `confusion`    | Opens the Confusion / Disorder domain block                            |
+| `-->`          | Declares a transition from one domain to another                       |
+
+### Items
+
+Items are quoted string labels placed on their own lines inside a domain block. Each item renders as a text badge within the domain region.
+
+```
+complex
+  "Investigate root cause"
+  "Run chaos experiment"
+```
+
+Keep per-domain item lists short — the quadrants have fixed layout and long lists can visually overflow their boxes. The confusion ellipse caps at three items and shows a `+N more` badge; the four quadrant domains do not clip, so prefer a handful of items each.
+
+### Transitions
+
+Transitions represent movement of items between domains over time. They are declared at the top level using `-->` between two domain names, with an optional label.
+
+```
+complex --> complicated : "Pattern identified"
+clear --> chaotic : "Complacency"
+chaotic --> complex : "Stabilized"
+```
+
+Common transitions:
+
+- **Complex → Complicated**: An emerging pattern has become understood and can now be analyzed.
+- **Chaotic → Complex**: A crisis has been stabilized enough to begin probing.
+- **Clear → Chaotic**: Complacency or over-constraint has led to collapse (the "cliff").
+- **Complicated → Clear**: Analysis has codified a solution into a standard practice.
+
+## Examples
+
+### Basic example
+
+```mermaid-example
+cynefin-beta
+  title Incident Response
+
+  complex
+    "Investigate root cause"
+    "Run chaos experiment"
+
+  complicated
+    "Analyze performance data"
+    "Expert review needed"
+
+  clear
+    "Restart service"
+    "Apply known fix"
+
+  chaotic
+    "Page on-call immediately"
+
+  confusion
+    "Unknown failure mode"
+```
+
+```mermaid
+cynefin-beta
+  title Incident Response
+
+  complex
+    "Investigate root cause"
+    "Run chaos experiment"
+
+  complicated
+    "Analyze performance data"
+    "Expert review needed"
+
+  clear
+    "Restart service"
+    "Apply known fix"
+
+  chaotic
+    "Page on-call immediately"
+
+  confusion
+    "Unknown failure mode"
+```
+
+### With transitions
+
+```mermaid-example
+cynefin-beta
+  title Strategy Categorization
+
+  complex
+    "Market research"
+
+  complicated
+    "Competitive analysis"
+
+  clear
+    "Standard pricing"
+
+  chaotic
+    "Crisis management"
+
+  complex --> complicated : "Pattern identified"
+  complicated --> clear : "Best practice codified"
+  clear --> chaotic : "Complacency"
+  chaotic --> complex : "Stabilized"
+```
+
+```mermaid
+cynefin-beta
+  title Strategy Categorization
+
+  complex
+    "Market research"
+
+  complicated
+    "Competitive analysis"
+
+  clear
+    "Standard pricing"
+
+  chaotic
+    "Crisis management"
+
+  complex --> complicated : "Pattern identified"
+  complicated --> clear : "Best practice codified"
+  clear --> chaotic : "Complacency"
+  chaotic --> complex : "Stabilized"
+```
+
+### Empty framework
+
+The domains themselves render even with no items, useful as a teaching or worksheet template.
+
+```mermaid-example
+cynefin-beta
+  title Cynefin Framework
+
+  complex
+  complicated
+  clear
+  chaotic
+```
+
+```mermaid
+cynefin-beta
+  title Cynefin Framework
+
+  complex
+  complicated
+  clear
+  chaotic
+```
+
+## Configuration
+
+Cynefin diagrams accept the following configuration under the `cynefin` key in the mermaid config:
+
+| Option                   | Type    | Default | Description                                                                                                                                                                                                                  |
+| ------------------------ | ------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `width`                  | number  | `800`   | Width of the diagram in pixels                                                                                                                                                                                               |
+| `height`                 | number  | `600`   | Height of the diagram in pixels                                                                                                                                                                                              |
+| `padding`                | number  | `40`    | Padding around the diagram                                                                                                                                                                                                   |
+| `showDomainDescriptions` | boolean | `true`  | Show decision model and practice type subtitles per domain                                                                                                                                                                   |
+| `boundaryAmplitude`      | number  | `8`     | Waviness amplitude of domain boundaries in pixels (set to `0` for straight lines)                                                                                                                                            |
+| `seed`                   | number  | `0`     | Deterministic seed for boundary waviness. `0` (default) hashes the diagram's SVG id so each diagram looks unique. Set any non-zero number to lock the waviness across renders — required for stable visual regression tests. |
+
+Example:
+
+```
+%%{init: {'cynefin': {'width': 1000, 'showDomainDescriptions': false}}}%%
+cynefin-beta
+  complex
+    "Adaptive work"
+```
+
+## Theming
+
+Cynefin diagrams use the following theme variables, which can be overridden via `themeVariables.cynefin`:
+
+| Variable         | Description                                      |
+| ---------------- | ------------------------------------------------ |
+| `complexBg`      | Background color for the Complex domain          |
+| `complicatedBg`  | Background color for the Complicated domain      |
+| `clearBg`        | Background color for the Clear domain            |
+| `chaoticBg`      | Background color for the Chaotic domain          |
+| `confusionBg`    | Background color for the Confusion center region |
+| `boundaryColor`  | Color of the wavy domain boundaries              |
+| `boundaryWidth`  | Stroke width of the boundaries                   |
+| `cliffColor`     | Color of the Clear/Chaotic cliff                 |
+| `cliffWidth`     | Stroke width of the cliff                        |
+| `arrowColor`     | Color of transition arrows                       |
+| `arrowWidth`     | Stroke width of transition arrows                |
+| `labelColor`     | Color of domain name labels                      |
+| `textColor`      | Color of item and subtitle text                  |
+| `domainFontSize` | Font size of domain name labels                  |
+| `itemFontSize`   | Font size of item badges and subtitles           |
+
+## Notes
+
+- Domain names are fixed keywords. Only `complex`, `complicated`, `clear`, `chaotic`, and `confusion` are recognized.
+- Domains can be declared in any order; their position in the diagram is always the same (Complex top-left, Complicated top-right, Chaotic bottom-left, Clear bottom-right, Confusion center).
+- The `confusion` domain has a compact center ellipse. Up to 3 items are shown inside it; if more are provided a `+N more` overflow badge is displayed. In practice, the confusion domain should contain very few items — its purpose is to surface unknowns so they can be moved to one of the four main domains.
+- Self-loop transitions (e.g. `complex --> complex`) are silently ignored. Transitions must connect two different domains.
+- Handdrawn mode is not currently supported.
+- The wavy boundary rendering is deterministic: the same input always produces the same diagram, so diffs are stable across builds.
+
+## Accessibility
+
+Cynefin diagrams support the standard mermaid accessibility directives:
+
+```
+cynefin-beta
+  accTitle: Cynefin framework for software delivery decisions
+  accDescr: A Cynefin map categorizing software tasks by complexity domain
+
+  complex
+    "New feature discovery"
+```

package/.grok/skills/mermaid/references/debug-heatmap.md

@@ -0,0 +1,68 @@
+# Debug Heat Map
+
+Maintained by Minimal Vibe Coding Kit. When the user accepts the debug-chart offer, render the failing workflow as a flowchart whose colors encode **suspicion**, so the eye lands on the most likely cause first.
+
+## Risk classes
+
+Append these classDefs and assign every node exactly one:
+
+```
+  classDef riskHigh fill:#FA5252,stroke:#444444,stroke-width:2px,color:#111111
+  classDef riskMed fill:#FFA94D,stroke:#444444,stroke-width:2px,color:#111111
+  classDef normal fill:#8ECAFF,stroke:#444444,stroke-width:2px,color:#111111
+  classDef verified fill:#8CE99A,stroke:#444444,stroke-width:2px,color:#111111
+  linkStyle default stroke:#444444,stroke-width:1.5px
+```
+
+| Class | Meaning | Assign when |
+| ----- | ------- | ----------- |
+| `riskHigh` (red, ink text) | most likely cause | crash site, failing assertion, unvalidated input, code changed right before the bug appeared |
+| `riskMed` (amber) | suspicious, unverified | touched by the same code path but not yet tested |
+| `normal` (sky) | in the flow, no evidence against it | default |
+| `verified` (green) | ruled out by a passing test or log evidence | only after real evidence, never by assumption |
+
+## Rules
+
+- **Evidence ranks the red.** Base suspicion on observed facts (stack traces, logs, diffs, failing tests) and state the strongest fact in the node or on its edge label (`"500 here"`, `"null at line 42"`).
+- Show relative likelihood in the label when it helps: `Parse config<br/>(suspect ~70%)`. Percentages are stated estimates, not measurements — round to tens.
+- One or two red nodes maximum. If everything looks red, the investigation is not ready for a chart yet.
+- Re-emit the chart when evidence changes: a ruled-out red node turns green, and the next suspect turns red. The chart tracks the hypothesis→verification loop of the `sequential-thinking` skill.
+- Respect the active coding level for density (see `coding-level-charts.md`).
+
+## Example
+
+```mermaid
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+    edgeLabelBackground: "#FFFFFF"
+---
+flowchart TD
+    A([Request in]) --> B(Auth middleware)
+    B --> C(Load user profile)
+    C --> D{Cache hit?}
+    D -->|yes| E(Serve cached)
+    D -->|no| F(Query database)
+    F --> G(Serialize response)
+    G --> H([Response out])
+
+    classDef riskHigh fill:#FA5252,stroke:#444444,stroke-width:2px,color:#111111
+    classDef riskMed fill:#FFA94D,stroke:#444444,stroke-width:2px,color:#111111
+    classDef normal fill:#8ECAFF,stroke:#444444,stroke-width:2px,color:#111111
+    classDef verified fill:#8CE99A,stroke:#444444,stroke-width:2px,color:#111111
+    classDef terminal fill:#111111,stroke:#444444,stroke-width:2px,color:#FFFFFF
+    linkStyle default stroke:#444444,stroke-width:1.5px
+
+    class A,H terminal
+    class B,E verified
+    class C,D normal
+    class F riskHigh
+    class G riskMed
+```
+
+Reading: auth and cache-serve are ruled out (green), the database query is the prime suspect (red — timeouts observed in logs), serialization is untested downstream of it (amber).