Repository: obsidian-tasks-group/obsidian-tasks (ts)

Issue:
Colour-code the Mermaid status diagrams so they are easier to read
### ⚠️ Please check that this feature request hasn't been suggested before.

- [X] I searched previous [Ideas in Discussions](https://github.com/obsidian-tasks-group/obsidian-tasks/discussions/categories/ideas-any-new-feature-requests-go-in-issues-please?discussions_q=category%3A%22Ideas%3A+Any+New+Feature+Requests+go+in+Issues+please%22+-label%3A%22status%3A+released%22+-label%3Aduplicate+sort%3Atop) didn't find any similar feature requests.
- [X] I searched previous [Issues](https://github.com/obsidian-tasks-group/obsidian-tasks/issues?q=is%3Aopen+is%3Aissue+label%3A%22type%3A+enhancement%22+sort%3Acomments-desc) didn't find any similar feature requests.
- [X] I am only requesting a single feature. Multiple changes should be split into individual requests, with links between them.
- [X] I believe my requested feature will be generally applicable to other users, not just me: it is not uniquely tied to my personal workflow.

### 🔖 Feature description

The mermaid diagrams in the documentation are quite useful, but a little hard to read at a glance, as all the boxes look the same.

For example:

![image](https://github.com/obsidian-tasks-group/obsidian-tasks/assets/4840096/fc3140af-fd28-4af0-b2dd-a1c9c24d53be)


You have to read the words to understand it.

### ✔️ Solution

I've been experimenting with adding colour to the mermaid status diagrams:

![image](https://github.com/obsidian-tasks-group/obsidian-tasks/assets/4840096/0789ecae-2d45-471b-b750-2b58f6aee99a)

Here is the source... the main bits are:

- classDefs at the top
- `:::TYPE` at the end of each node
- linkStyle at the end to make the arrows a little paler (no easy way to change the arrowhead colours)

~~~
```mermaid
flowchart LR

classDef TODO        stroke:#f33,stroke-width:3px;
classDef DONE        stroke:#0c0,stroke-width:3px;
classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
classDef CANCELLED   stroke:#ddd,stroke-width:3px;
classDef NON_TASK    stroke:#99e,stroke-width:3px;

1["'Todo'<br>[ ] -> [x]<br>(TODO)"]:::TODO
2["'Done'<br>[x] -> [ ]<br>(DONE)"]:::DONE
3["'In Progress'<br>[/] -> [x]<br>(IN_PROGRESS)"]:::IN_PROGRESS
4["'Cancelled'<br>[-] -> [ ]<br>(CANCELLED)"]:::CANCELLED
5["'Impeded'<br>[p] -> [ ]<br>(TODO)"]:::TODO
6["'!! Important'<br>[!] -> [X]<br>(TODO)"]:::TODO
7["'!! In Progress - Important'<br>[D] -> [X]<br>(IN_PROGRESS)"]:::IN_PROGRESS
8["'!! Done'<br>[X] -> [!]<br>(DONE)"]:::DONE
9["'Pro'<br>[P] -> [C]<br>(NON_TASK)"]:::NON_TASK
10["'Con'<br>[C] -> [P]<br>(NON_TASK)"]:::NON_TASK
11["'Question'<br>[q] -> [q]<br>(NON_TASK)"]:::NON_TASK

1 --> 2
2 --> 1
3 --> 2
4 --> 1
5 --> 1
6 --> 8
7 --> 8
8 --> 6
9 --> 10
10 --> 9
11 --> 11

linkStyle default stroke:gray
```
~~~

I chose the shades of colour so that they look reasonably good in dark mode too:

![image](https://github.com/obsidian-tasks-group/obsidian-tasks/assets/4840096/f027f30b-45d7-4fae-9eb9-daacab1826e1)



### ❓ Alternatives

I tried fairly hard to put the styling in CSS instead of in the diagram, so that I could use Obsidian variables.

Others have tried the same...

- [mermaid "classDef" to "obsidian" "css" - Google Search](https://www.google.com/search?q=+mermaid+%22classDef%22+to+%22obsidian%22+%22css%22)
- [How to style mermaid css (in editor and in obsidian publish) - Help - Obsidian Forum](https://forum.obsidian.md/t/how-to-style-mermaid-css-in-editor-and-in-obsidian-publish/48222)
- [Using mermaid css with Obsidian - Help - Obsidian Forum](https://forum.obsidian.md/t/using-mermaid-css-with-obsidian/57713)

I also tried filling the rectangles, so the colour stood out more... But I could not find fill colours that worked in both Light and Dark modes.

### 📝 Additional Context

_No response_

Pull request description:
feat: Colour-code the Mermaid status diagrams for readability
<!--- Provide a general summary of your changes in the Title above -->

# Description

Colour-code the Mermaid status diagrams so they are easier to read.

These colours are also visible in some of the documentation pages now.

See #2386 for details and motivation.

<!--- Describe your changes in detail -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

Fixes #2386.

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, tests ran to see how -->
<!--- your change affects other areas of the code, etc. -->

- With existing tests
- By testing in the Demo Vault

## Screenshots (if appropriate)



![image](https://github.com/obsidian-tasks-group/obsidian-tasks/assets/4840096/0789ecae-2d45-471b-b750-2b58f6aee99a)


I chose the shades of colour so that they look reasonably good in dark mode too:

![image](https://github.com/obsidian-tasks-group/obsidian-tasks/assets/4840096/f027f30b-45d7-4fae-9eb9-daacab1826e1)



## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->

Changes visible to users:

- [x] **New feature** (prefix: `feat` - non-breaking change which adds functionality)
- [x] **Documentation** (prefix: `docs` - improvements to any documentation content **for users**)

Internal changes:

- [x] **Tests** (prefix: `test` - additions and improvements to unit tests and the smoke tests)

## Checklist

<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->

- [x] My code follows the code style of this project and passes `yarn run lint`.
- [x] My change requires a change to the documentation.
- [ ] I have [updated the documentation](https://publish.obsidian.md/tasks-contributing/Documentation/About+Documentation) accordingly.
- [x] My change has adequate [Unit Test coverage](https://publish.obsidian.md/tasks-contributing/Testing/About+Testing).

## Terms

<!--
By submitting this pull request, you must agree to follow our
[contributing guide](https://publish.obsidian.md/tasks-contributing) and
[Code of Conduct](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CODE_OF_CONDUCT.md).
Put an x in the boxes to confirm you agree.
-->

- [x] My contribution follow this project's [contributing guide](https://publish.obsidian.md/tasks-contributing)
- [x] I agree to follow this project's [Code of Conduct](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CODE_OF_CONDUCT.md)


Patch:
diff --git a/docs/Getting Started/Statuses/Example Statuses.md b/docs/Getting Started/Statuses/Example Statuses.md
index f530be0b..3b50ce9a 100644
--- a/docs/Getting Started/Statuses/Example Statuses.md
+++ b/docs/Getting Started/Statuses/Example Statuses.md
@@ -19,12 +19,21 @@ This might be useful if you have a few slightly more time-consuming tasks to kee
 <!-- include: DocsSamplesForStatuses.test.DefaultStatuses_todo-in_progress-done.approved.mermaid.md -->
 ```mermaid
 flowchart LR
-1["Todo"]
-2["In Progress"]
-3["Done"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["Todo"]:::TODO
+2["In Progress"]:::IN_PROGRESS
+3["Done"]:::DONE
 1 --> 2
 2 --> 3
 3 --> 1
+
+linkStyle default stroke:gray
 ```
 <!-- endInclude -->
 
@@ -47,12 +56,21 @@ By using non-standard symbols for the `IN_PROGRESS` and `DONE` statuses, if I de
 <!-- include: DocsSamplesForStatuses.test.DefaultStatuses_important-cycle.approved.mermaid.md -->
 ```mermaid
 flowchart LR
-1["Important"]
-2["Doing - Important"]
-3["Done - Important"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["Important"]:::TODO
+2["Doing - Important"]:::IN_PROGRESS
+3["Done - Important"]:::DONE
 1 --> 2
 2 --> 3
 3 --> 1
+
+linkStyle default stroke:gray
 ```
 <!-- endInclude -->
 
@@ -77,10 +95,19 @@ Either way, I can make them toggle to each other, and by giving them the type `N
 <!-- include: DocsSamplesForStatuses.test.DefaultStatuses_pro-con-cycle.approved.mermaid.md -->
 ```mermaid
 flowchart LR
-1["Pro"]
-2["Con"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["Pro"]:::NON_TASK
+2["Con"]:::NON_TASK
 1 --> 2
 2 --> 1
+
+linkStyle default stroke:gray
 ```
 <!-- endInclude -->
 
@@ -104,16 +131,25 @@ Here are some statuses from the ITS Theme where this behaviour might be useful.
 <!-- include: DocsSamplesForStatuses.test.DefaultStatuses_toggle-does-nothing.approved.mermaid.md -->
 ```mermaid
 flowchart LR
-1["Bookmark"]
-2["Example"]
-3["Information"]
-4["Paraphrase"]
-5["Quote"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["Bookmark"]:::NON_TASK
+2["Example"]:::NON_TASK
+3["Information"]:::NON_TASK
+4["Paraphrase"]:::NON_TASK
+5["Quote"]:::NON_TASK
 1 --> 1
 2 --> 2
 3 --> 3
 4 --> 4
 5 --> 5
+
+linkStyle default stroke:gray
 ```
 <!-- endInclude -->
 
diff --git a/docs/Getting Started/Statuses/Recurring Tasks and Custom Statuses.md b/docs/Getting Started/Statuses/Recurring Tasks and Custom Statuses.md
index ab085fd8..efb81754 100644
--- a/docs/Getting Started/Statuses/Recurring Tasks and Custom Statuses.md
+++ b/docs/Getting Started/Statuses/Recurring Tasks and Custom Statuses.md
@@ -30,12 +30,21 @@ Suppose that we have adjusted the default Tasks settings slightly, to give us th
 <!-- include: DocsSamplesForStatuses.test.DefaultStatuses_todo-in_progress-done.approved.detailed.mermaid.md -->
 ```mermaid
 flowchart LR
-1["'Todo'<br>[ ] -> [/]<br>(TODO)"]
-2["'In Progress'<br>[/] -> [x]<br>(IN_PROGRESS)"]
-3["'Done'<br>[x] -> [ ]<br>(DONE)"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["'Todo'<br>[ ] -> [/]<br>(TODO)"]:::TODO
+2["'In Progress'<br>[/] -> [x]<br>(IN_PROGRESS)"]:::IN_PROGRESS
+3["'Done'<br>[x] -> [ ]<br>(DONE)"]:::DONE
 1 --> 2
 2 --> 3
 3 --> 1
+
+linkStyle default stroke:gray
 ```
 <!-- endInclude -->
 
@@ -107,14 +116,23 @@ In the following example, `DONE` is followed by `CANCELLED`.
 <!-- include: DocsSamplesForStatuses.test.DefaultStatuses_done-toggles-to-cancelled.approved.detailed.mermaid.md -->
 ```mermaid
 flowchart LR
-1["'Todo'<br>[ ] -> [/]<br>(TODO)"]
-2["'Done'<br>[x] -> [-]<br>(DONE)"]
-3["'In Progress'<br>[/] -> [x]<br>(IN_PROGRESS)"]
-4["'Cancelled'<br>[-] -> [ ]<br>(CANCELLED)"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["'Todo'<br>[ ] -> [/]<br>(TODO)"]:::TODO
+2["'Done'<br>[x] -> [-]<br>(DONE)"]:::DONE
+3["'In Progress'<br>[/] -> [x]<br>(IN_PROGRESS)"]:::IN_PROGRESS
+4["'Cancelled'<br>[-] -> [ ]<br>(CANCELLED)"]:::CANCELLED
 1 --> 3
 2 --> 4
 3 --> 2
 4 --> 1
+
+linkStyle default stroke:gray
 ```
 <!-- endInclude -->
 
@@ -157,10 +175,19 @@ Note that the new task has `CANCELLED` status, so will not typically show up in
 <!-- include: DocsSamplesForStatuses.test.DefaultStatuses_pro-con-cycle.approved.detailed.mermaid.md -->
 ```mermaid
 flowchart LR
-1["'Pro'<br>[P] -> [C]<br>(NON_TASK)"]
-2["'Con'<br>[C] -> [P]<br>(NON_TASK)"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["'Pro'<br>[P] -> [C]<br>(NON_TASK)"]:::NON_TASK
+2["'Con'<br>[C] -> [P]<br>(NON_TASK)"]:::NON_TASK
 1 --> 2
 2 --> 1
+
+linkStyle default stroke:gray
 ```
 <!-- endInclude -->
 
diff --git a/src/StatusRegistry.ts b/src/StatusRegistry.ts
index 0d6223b0..98faf93e 100644
--- a/src/StatusRegistry.ts
+++ b/src/StatusRegistry.ts
@@ -309,21 +309,8 @@ export class StatusRegistry {
         const nodes: string[] = [];
         const edges: string[] = [];
         uniqueStatuses.forEach((status, index) => {
-            const statusName = htmlEncodeString(status.name);
-            if (includeDetails) {
-                const statusSymbol = htmlEncodeCharacter(status.symbol);
-                const statusNextStatusSymbol = htmlEncodeCharacter(status.nextStatusSymbol);
-                const statusType = status.type;
-
-                const transitionText = `[${statusSymbol}] -> [${statusNextStatusSymbol}]`;
-                const statusNameText = `'${statusName}'`;
-                const statusTypeText = `(${statusType})`;
-
-                const text = `${index + 1}["${statusNameText}<br>${transitionText}<br>${statusTypeText}"]`;
-                nodes.push(text);
-            } else {
-                nodes.push(`${index + 1}["${statusName}"]`);
-            }
+            const label = this.getMermaidNodeLabel(status, includeDetails);
+            nodes.push(`${index + 1}${label}`);
 
             // Check the next status:
             const nextStatus = this.getNextStatus(status);
@@ -339,9 +326,35 @@ export class StatusRegistry {
         return `
 \`\`\`${language}
 flowchart LR
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
 ${nodes.join('\n')}
 ${edges.join('\n')}
+
+linkStyle default stroke:gray
 \`\`\`
 `;
     }
+
+    private getMermaidNodeLabel(status: Status, includeDetails: boolean) {
+        const statusName = htmlEncodeString(status.name);
+        const statusType = status.type;
+        if (includeDetails) {
+            const statusSymbol = htmlEncodeCharacter(status.symbol);
+            const statusNextStatusSymbol = htmlEncodeCharacter(status.nextStatusSymbol);
+
+            const transitionText = `[${statusSymbol}] -> [${statusNextStatusSymbol}]`;
+            const statusNameText = `'${statusName}'`;
+            const statusTypeText = `(${statusType})`;
+
+            return `["${statusNameText}<br>${transitionText}<br>${statusTypeText}"]:::${statusType}`;
+        } else {
+            return `["${statusName}"]:::${statusType}`;
+        }
+    }
 }


Test patch:
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_core-statuses.approved.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_core-statuses.approved.mermaid.md
index 2ed7740a..812af9a8 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_core-statuses.approved.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_core-statuses.approved.mermaid.md
@@ -1,8 +1,17 @@
 
 ```mermaid
 flowchart LR
-1["Todo"]
-2["Done"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["Todo"]:::TODO
+2["Done"]:::DONE
 1 --> 2
 2 --> 1
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_custom-statuses.approved.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_custom-statuses.approved.mermaid.md
index cac2f746..dc4b7c0e 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_custom-statuses.approved.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_custom-statuses.approved.mermaid.md
@@ -1,7 +1,16 @@
 
 ```mermaid
 flowchart LR
-1["In Progress"]
-2["Cancelled"]
 
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["In Progress"]:::IN_PROGRESS
+2["Cancelled"]:::CANCELLED
+
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_done-toggles-to-cancelled-with-unconventional-symbols.approved.detailed.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_done-toggles-to-cancelled-with-unconventional-symbols.approved.detailed.mermaid.md
index c953c326..8540aca5 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_done-toggles-to-cancelled-with-unconventional-symbols.approved.detailed.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_done-toggles-to-cancelled-with-unconventional-symbols.approved.detailed.mermaid.md
@@ -1,10 +1,19 @@
 
 ```mermaid
 flowchart LR
-1["'Todo'<br>[ ] -> [*]<br>(TODO)"]
-2["'Done'<br>[*] -> [x]<br>(DONE)"]
-3["'Cancelled'<br>[x] -> [ ]<br>(CANCELLED)"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["'Todo'<br>[ ] -> [*]<br>(TODO)"]:::TODO
+2["'Done'<br>[*] -> [x]<br>(DONE)"]:::DONE
+3["'Cancelled'<br>[x] -> [ ]<br>(CANCELLED)"]:::CANCELLED
 1 --> 2
 2 --> 3
 3 --> 1
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_done-toggles-to-cancelled.approved.detailed.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_done-toggles-to-cancelled.approved.detailed.mermaid.md
index 22c8810c..9e328437 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_done-toggles-to-cancelled.approved.detailed.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_done-toggles-to-cancelled.approved.detailed.mermaid.md
@@ -1,12 +1,21 @@
 
 ```mermaid
 flowchart LR
-1["'Todo'<br>[ ] -> [/]<br>(TODO)"]
-2["'Done'<br>[x] -> [-]<br>(DONE)"]
-3["'In Progress'<br>[/] -> [x]<br>(IN_PROGRESS)"]
-4["'Cancelled'<br>[-] -> [ ]<br>(CANCELLED)"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["'Todo'<br>[ ] -> [/]<br>(TODO)"]:::TODO
+2["'Done'<br>[x] -> [-]<br>(DONE)"]:::DONE
+3["'In Progress'<br>[/] -> [x]<br>(IN_PROGRESS)"]:::IN_PROGRESS
+4["'Cancelled'<br>[-] -> [ ]<br>(CANCELLED)"]:::CANCELLED
 1 --> 3
 2 --> 4
 3 --> 2
 4 --> 1
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_important-cycle.approved.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_important-cycle.approved.mermaid.md
index 23600bf9..942b4079 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_important-cycle.approved.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_important-cycle.approved.mermaid.md
@@ -1,10 +1,19 @@
 
 ```mermaid
 flowchart LR
-1["Important"]
-2["Doing - Important"]
-3["Done - Important"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["Important"]:::TODO
+2["Doing - Important"]:::IN_PROGRESS
+3["Done - Important"]:::DONE
 1 --> 2
 2 --> 3
 3 --> 1
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_pro-con-cycle.approved.detailed.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_pro-con-cycle.approved.detailed.mermaid.md
index b084506d..9d4ff56b 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_pro-con-cycle.approved.detailed.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_pro-con-cycle.approved.detailed.mermaid.md
@@ -1,8 +1,17 @@
 
 ```mermaid
 flowchart LR
-1["'Pro'<br>[P] -> [C]<br>(NON_TASK)"]
-2["'Con'<br>[C] -> [P]<br>(NON_TASK)"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["'Pro'<br>[P] -> [C]<br>(NON_TASK)"]:::NON_TASK
+2["'Con'<br>[C] -> [P]<br>(NON_TASK)"]:::NON_TASK
 1 --> 2
 2 --> 1
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_pro-con-cycle.approved.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_pro-con-cycle.approved.mermaid.md
index 5bc9d008..5d65c1cb 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_pro-con-cycle.approved.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_pro-con-cycle.approved.mermaid.md
@@ -1,8 +1,17 @@
 
 ```mermaid
 flowchart LR
-1["Pro"]
-2["Con"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["Pro"]:::NON_TASK
+2["Con"]:::NON_TASK
 1 --> 2
 2 --> 1
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_todo-in_progress-done.approved.detailed.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_todo-in_progress-done.approved.detailed.mermaid.md
index ea64712d..d86b4e11 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_todo-in_progress-done.approved.detailed.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_todo-in_progress-done.approved.detailed.mermaid.md
@@ -1,10 +1,19 @@
 
 ```mermaid
 flowchart LR
-1["'Todo'<br>[ ] -> [/]<br>(TODO)"]
-2["'In Progress'<br>[/] -> [x]<br>(IN_PROGRESS)"]
-3["'Done'<br>[x] -> [ ]<br>(DONE)"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["'Todo'<br>[ ] -> [/]<br>(TODO)"]:::TODO
+2["'In Progress'<br>[/] -> [x]<br>(IN_PROGRESS)"]:::IN_PROGRESS
+3["'Done'<br>[x] -> [ ]<br>(DONE)"]:::DONE
 1 --> 2
 2 --> 3
 3 --> 1
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_todo-in_progress-done.approved.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_todo-in_progress-done.approved.mermaid.md
index b21619ba..1368c061 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_todo-in_progress-done.approved.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_todo-in_progress-done.approved.mermaid.md
@@ -1,10 +1,19 @@
 
 ```mermaid
 flowchart LR
-1["Todo"]
-2["In Progress"]
-3["Done"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["Todo"]:::TODO
+2["In Progress"]:::IN_PROGRESS
+3["Done"]:::DONE
 1 --> 2
 2 --> 3
 3 --> 1
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_toggle-does-nothing.approved.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_toggle-does-nothing.approved.mermaid.md
index c2b2de3a..0c7ba144 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_toggle-does-nothing.approved.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_toggle-does-nothing.approved.mermaid.md
@@ -1,14 +1,23 @@
 
 ```mermaid
 flowchart LR
-1["Bookmark"]
-2["Example"]
-3["Information"]
-4["Paraphrase"]
-5["Quote"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["Bookmark"]:::NON_TASK
+2["Example"]:::NON_TASK
+3["Information"]:::NON_TASK
+4["Paraphrase"]:::NON_TASK
+5["Quote"]:::NON_TASK
 1 --> 1
 2 --> 2
 3 --> 3
 4 --> 4
 5 --> 5
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_AnuPpuccin_Table.approved.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_AnuPpuccin_Table.approved.mermaid.md
index 9c80b92d..bca42a23 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_AnuPpuccin_Table.approved.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_AnuPpuccin_Table.approved.mermaid.md
@@ -1,34 +1,41 @@
 
 ```mermaid
 flowchart LR
-1["Unchecked"]
-2["Checked"]
-3["Rescheduled"]
-4["Scheduled"]
-5["Important"]
-6["Cancelled"]
-7["In Progress"]
-8["Question"]
-9["Star"]
-10["Note"]
-11["Location"]
-12["Information"]
-13["Idea"]
-14["Amount"]
-15["Pro"]
-16["Con"]
-17["Bookmark"]
-18["Quote"]
-19["Speech bubble 0"]
-20["Speech bubble 1"]
-21["Speech bubble 2"]
-22["Speech bubble 3"]
-23["Speech bubble 4"]
-24["Speech bubble 5"]
-25["Speech bubble 6"]
-26["Speech bubble 7"]
-27["Speech bubble 8"]
-28["Speech bubble 9"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["Unchecked"]:::TODO
+2["Checked"]:::DONE
+3["Rescheduled"]:::TODO
+4["Scheduled"]:::TODO
+5["Important"]:::TODO
+6["Cancelled"]:::CANCELLED
+7["In Progress"]:::IN_PROGRESS
+8["Question"]:::TODO
+9["Star"]:::TODO
+10["Note"]:::TODO
+11["Location"]:::TODO
+12["Information"]:::TODO
+13["Idea"]:::TODO
+14["Amount"]:::TODO
+15["Pro"]:::TODO
+16["Con"]:::TODO
+17["Bookmark"]:::TODO
+18["Quote"]:::TODO
+19["Speech bubble 0"]:::NON_TASK
+20["Speech bubble 1"]:::NON_TASK
+21["Speech bubble 2"]:::NON_TASK
+22["Speech bubble 3"]:::NON_TASK
+23["Speech bubble 4"]:::NON_TASK
+24["Speech bubble 5"]:::NON_TASK
+25["Speech bubble 6"]:::NON_TASK
+26["Speech bubble 7"]:::NON_TASK
+27["Speech bubble 8"]:::NON_TASK
+28["Speech bubble 9"]:::NON_TASK
 1 --> 2
 2 --> 1
 3 --> 2
@@ -57,4 +64,6 @@ flowchart LR
 26 --> 26
 27 --> 27
 28 --> 28
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Aura_Table.approved.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Aura_Table.approved.mermaid.md
index d9e32cad..2ed78d78 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Aura_Table.approved.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Aura_Table.approved.mermaid.md
@@ -1,25 +1,32 @@
 
 ```mermaid
 flowchart LR
-1["incomplete"]
-2["complete / done"]
-3["cancelled"]
-4["deferred"]
-5["in progress, or half-done"]
-6["Important"]
-7["question"]
-8["review"]
-9["Inbox / task that should be processed later"]
-10["bookmark"]
-11["brainstorm"]
-12["deferred or scheduled"]
-13["Info"]
-14["idea"]
-15["note"]
-16["quote"]
-17["win / success / reward"]
-18["pro"]
-19["con"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["incomplete"]:::TODO
+2["complete / done"]:::DONE
+3["cancelled"]:::CANCELLED
+4["deferred"]:::TODO
+5["in progress, or half-done"]:::IN_PROGRESS
+6["Important"]:::TODO
+7["question"]:::TODO
+8["review"]:::TODO
+9["Inbox / task that should be processed later"]:::TODO
+10["bookmark"]:::TODO
+11["brainstorm"]:::TODO
+12["deferred or scheduled"]:::TODO
+13["Info"]:::TODO
+14["idea"]:::TODO
+15["note"]:::TODO
+16["quote"]:::TODO
+17["win / success / reward"]:::TODO
+18["pro"]:::TODO
+19["con"]:::TODO
 1 --> 2
 2 --> 1
 3 --> 1
@@ -39,4 +46,6 @@ flowchart LR
 17 --> 2
 18 --> 2
 19 --> 2
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Ebullientworks_Table.approved.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Ebullientworks_Table.approved.mermaid.md
index afa32633..3f191322 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Ebullientworks_Table.approved.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Ebullientworks_Table.approved.mermaid.md
@@ -1,14 +1,21 @@
 
 ```mermaid
 flowchart LR
-1["Unchecked"]
-2["Checked"]
-3["Cancelled"]
-4["In Progress"]
-5["Deferred"]
-6["Important"]
-7["Question"]
-8["Review"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["Unchecked"]:::TODO
+2["Checked"]:::DONE
+3["Cancelled"]:::CANCELLED
+4["In Progress"]:::IN_PROGRESS
+5["Deferred"]:::TODO
+6["Important"]:::TODO
+7["Question"]:::TODO
+8["Review"]:::TODO
 1 --> 2
 2 --> 1
 3 --> 1
@@ -17,4 +24,6 @@ flowchart LR
 6 --> 2
 7 --> 2
 8 --> 2
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_ITS_Table.approved.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_ITS_Table.approved.mermaid.md
index b0e0e026..ea7aa6a6 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_ITS_Table.approved.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_ITS_Table.approved.mermaid.md
@@ -1,43 +1,50 @@
 
 ```mermaid
 flowchart LR
-1["Unchecked"]
-2["Regular"]
-3["Checked"]
-4["Dropped"]
-5["Forward"]
-6["Date"]
-7["Question"]
-8["Half Done"]
-9["Add"]
-10["Research"]
-11["Important"]
-12["Idea"]
-13["Brainstorm"]
-14["Pro"]
-15["Con"]
-16["Quote"]
-17["Note"]
-18["Bookmark"]
-19["Information"]
-20["Paraphrase"]
-21["Location"]
-22["Example"]
-23["Answer"]
-24["Reward"]
-25["Choice"]
-26["Doing"]
-27["Time"]
-28["Character / Person"]
-29["Talk"]
-30["Outline / Plot"]
-31["Conflict"]
-32["World"]
-33["Clue / Find"]
-34["Foreshadow"]
-35["Favorite / Health"]
-36["Symbolism"]
-37["Secret"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["Unchecked"]:::TODO
+2["Regular"]:::DONE
+3["Checked"]:::DONE
+4["Dropped"]:::CANCELLED
+5["Forward"]:::TODO
+6["Date"]:::TODO
+7["Question"]:::TODO
+8["Half Done"]:::IN_PROGRESS
+9["Add"]:::TODO
+10["Research"]:::TODO
+11["Important"]:::TODO
+12["Idea"]:::TODO
+13["Brainstorm"]:::TODO
+14["Pro"]:::TODO
+15["Con"]:::TODO
+16["Quote"]:::TODO
+17["Note"]:::TODO
+18["Bookmark"]:::TODO
+19["Information"]:::TODO
+20["Paraphrase"]:::TODO
+21["Location"]:::TODO
+22["Example"]:::TODO
+23["Answer"]:::TODO
+24["Reward"]:::TODO
+25["Choice"]:::TODO
+26["Doing"]:::IN_PROGRESS
+27["Time"]:::TODO
+28["Character / Person"]:::TODO
+29["Talk"]:::TODO
+30["Outline / Plot"]:::TODO
+31["Conflict"]:::TODO
+32["World"]:::TODO
+33["Clue / Find"]:::TODO
+34["Foreshadow"]:::TODO
+35["Favorite / Health"]:::TODO
+36["Symbolism"]:::TODO
+37["Secret"]:::TODO
 1 --> 2
 2 --> 1
 3 --> 1
@@ -75,4 +82,6 @@ flowchart LR
 35 --> 2
 36 --> 2
 37 --> 2
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_LYT_Mode_Table.approved.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_LYT_Mode_Table.approved.mermaid.md
index 5578738a..0b94ddcb 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_LYT_Mode_Table.approved.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_LYT_Mode_Table.approved.mermaid.md
@@ -1,28 +1,35 @@
 
 ```mermaid
 flowchart LR
-1["Unchecked"]
-2["Checked"]
-3["Rescheduled"]
-4["Scheduled"]
-5["Important"]
-6["Cancelled"]
-7["In Progress"]
-8["Question"]
-9["Star"]
-10["Note"]
-11["Location"]
-12["Information"]
-13["Idea"]
-14["Amount"]
-15["Pro"]
-16["Con"]
-17["Bookmark"]
-18["Fire"]
-19["Key"]
-20["Win"]
-21["Up"]
-22["Down"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["Unchecked"]:::TODO
+2["Checked"]:::DONE
+3["Rescheduled"]:::TODO
+4["Scheduled"]:::TODO
+5["Important"]:::TODO
+6["Cancelled"]:::CANCELLED
+7["In Progress"]:::IN_PROGRESS
+8["Question"]:::TODO
+9["Star"]:::TODO
+10["Note"]:::TODO
+11["Location"]:::TODO
+12["Information"]:::TODO
+13["Idea"]:::TODO
+14["Amount"]:::TODO
+15["Pro"]:::TODO
+16["Con"]:::TODO
+17["Bookmark"]:::TODO
+18["Fire"]:::TODO
+19["Key"]:::TODO
+20["Win"]:::TODO
+21["Up"]:::TODO
+22["Down"]:::TODO
 1 --> 2
 2 --> 1
 3 --> 2
@@ -45,4 +52,6 @@ flowchart LR
 20 --> 2
 21 --> 2
 22 --> 2
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Minimal_Table.approved.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Minimal_Table.approved.mermaid.md
index 8dfbdbec..4c1d2754 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Minimal_Table.approved.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Minimal_Table.approved.mermaid.md
@@ -1,28 +1,35 @@
 
 ```mermaid
 flowchart LR
-1["to-do"]
-2["incomplete"]
-3["done"]
-4["canceled"]
-5["forwarded"]
-6["scheduling"]
-7["question"]
-8["important"]
-9["star"]
-10["quote"]
-11["location"]
-12["bookmark"]
-13["information"]
-14["savings"]
-15["idea"]
-16["pros"]
-17["cons"]
-18["fire"]
-19["key"]
-20["win"]
-21["up"]
-22["down"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["to-do"]:::TODO
+2["incomplete"]:::IN_PROGRESS
+3["done"]:::DONE
+4["canceled"]:::CANCELLED
+5["forwarded"]:::TODO
+6["scheduling"]:::TODO
+7["question"]:::TODO
+8["important"]:::TODO
+9["star"]:::TODO
+10["quote"]:::TODO
+11["location"]:::TODO
+12["bookmark"]:::TODO
+13["information"]:::TODO
+14["savings"]:::TODO
+15["idea"]:::TODO
+16["pros"]:::TODO
+17["cons"]:::TODO
+18["fire"]:::TODO
+19["key"]:::TODO
+20["win"]:::TODO
+21["up"]:::TODO
+22["down"]:::TODO
 1 --> 3
 2 --> 3
 3 --> 1
@@ -45,4 +52,6 @@ flowchart LR
 20 --> 3
 21 --> 3
 22 --> 3
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Things_Table.approved.mermaid.md b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Things_Table.approved.mermaid.md
index 8dfbdbec..4c1d2754 100644
--- a/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Things_Table.approved.mermaid.md
+++ b/tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Things_Table.approved.mermaid.md
@@ -1,28 +1,35 @@
 
 ```mermaid
 flowchart LR
-1["to-do"]
-2["incomplete"]
-3["done"]
-4["canceled"]
-5["forwarded"]
-6["scheduling"]
-7["question"]
-8["important"]
-9["star"]
-10["quote"]
-11["location"]
-12["bookmark"]
-13["information"]
-14["savings"]
-15["idea"]
-16["pros"]
-17["cons"]
-18["fire"]
-19["key"]
-20["win"]
-21["up"]
-22["down"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["to-do"]:::TODO
+2["incomplete"]:::IN_PROGRESS
+3["done"]:::DONE
+4["canceled"]:::CANCELLED
+5["forwarded"]:::TODO
+6["scheduling"]:::TODO
+7["question"]:::TODO
+8["important"]:::TODO
+9["star"]:::TODO
+10["quote"]:::TODO
+11["location"]:::TODO
+12["bookmark"]:::TODO
+13["information"]:::TODO
+14["savings"]:::TODO
+15["idea"]:::TODO
+16["pros"]:::TODO
+17["cons"]:::TODO
+18["fire"]:::TODO
+19["key"]:::TODO
+20["win"]:::TODO
+21["up"]:::TODO
+22["down"]:::TODO
 1 --> 3
 2 --> 3
 3 --> 1
@@ -45,4 +52,6 @@ flowchart LR
 20 --> 3
 21 --> 3
 22 --> 3
+
+linkStyle default stroke:gray
 ```
diff --git a/tests/StatusRegistry.test.ts b/tests/StatusRegistry.test.ts
index 3a0f5849..59b885b7 100644
--- a/tests/StatusRegistry.test.ts
+++ b/tests/StatusRegistry.test.ts
@@ -173,14 +173,23 @@ describe('StatusRegistry', () => {
             "
             \`\`\`mermaid
             flowchart LR
-            1["Todo"]
-            2["In Progress"]
-            3["Done"]
-            4["Cancelled"]
+
+            classDef TODO        stroke:#f33,stroke-width:3px;
+            classDef DONE        stroke:#0c0,stroke-width:3px;
+            classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+            classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+            classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+            1["Todo"]:::TODO
+            2["In Progress"]:::IN_PROGRESS
+            3["Done"]:::DONE
+            4["Cancelled"]:::CANCELLED
             1 --> 3
             2 --> 3
             3 --> 1
             4 --> 1
+
+            linkStyle default stroke:gray
             \`\`\`
             "
         `);
@@ -190,14 +199,23 @@ describe('StatusRegistry', () => {
             "
             \`\`\`mermaid
             flowchart LR
-            1["'Todo'<br>[ ] -> [x]<br>(TODO)"]
-            2["'In Progress'<br>[/] -> [x]<br>(IN_PROGRESS)"]
-            3["'Done'<br>[x] -> [ ]<br>(DONE)"]
-            4["'Cancelled'<br>[-] -> [ ]<br>(CANCELLED)"]
+
+            classDef TODO        stroke:#f33,stroke-width:3px;
+            classDef DONE        stroke:#0c0,stroke-width:3px;
+            classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+            classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+            classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+            1["'Todo'<br>[ ] -> [x]<br>(TODO)"]:::TODO
+            2["'In Progress'<br>[/] -> [x]<br>(IN_PROGRESS)"]:::IN_PROGRESS
+            3["'Done'<br>[x] -> [ ]<br>(DONE)"]:::DONE
+            4["'Cancelled'<br>[-] -> [ ]<br>(CANCELLED)"]:::CANCELLED
             1 --> 3
             2 --> 3
             3 --> 1
             4 --> 1
+
+            linkStyle default stroke:gray
             \`\`\`
             "
         `);
@@ -222,14 +240,23 @@ describe('StatusRegistry', () => {
             "
             \`\`\`mermaid
             flowchart LR
-            1["Todo &lt;"]
-            2["Todo &gt;"]
-            3["Todo &quot;"]
-            4["Todo &amp;"]
+
+            classDef TODO        stroke:#f33,stroke-width:3px;
+            classDef DONE        stroke:#0c0,stroke-width:3px;
+            classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+            classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+            classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+            1["Todo &lt;"]:::TODO
+            2["Todo &gt;"]:::TODO
+            3["Todo &quot;"]:::TODO
+            4["Todo &amp;"]:::TODO
             1 --> 1
             2 --> 2
             3 --> 3
             4 --> 4
+
+            linkStyle default stroke:gray
             \`\`\`
             "
         `);
@@ -239,14 +266,23 @@ describe('StatusRegistry', () => {
             "
             \`\`\`mermaid
             flowchart LR
-            1["'Todo &lt;'<br>[&lt;] -> [&lt;]<br>(TODO)"]
-            2["'Todo &gt;'<br>[&gt;] -> [&gt;]<br>(TODO)"]
-            3["'Todo &quot;'<br>[&quot;] -> [&quot;]<br>(TODO)"]
-            4["'Todo &amp;'<br>[&amp;] -> [&amp;]<br>(TODO)"]
+
+            classDef TODO        stroke:#f33,stroke-width:3px;
+            classDef DONE        stroke:#0c0,stroke-width:3px;
+            classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+            classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+            classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+            1["'Todo &lt;'<br>[&lt;] -> [&lt;]<br>(TODO)"]:::TODO
+            2["'Todo &gt;'<br>[&gt;] -> [&gt;]<br>(TODO)"]:::TODO
+            3["'Todo &quot;'<br>[&quot;] -> [&quot;]<br>(TODO)"]:::TODO
+            4["'Todo &amp;'<br>[&amp;] -> [&amp;]<br>(TODO)"]:::TODO
             1 --> 1
             2 --> 2
             3 --> 3
             4 --> 4
+
+            linkStyle default stroke:gray
             \`\`\`
             "
         `);
@@ -269,8 +305,17 @@ describe('StatusRegistry', () => {
             "
             \`\`\`mermaid
             flowchart LR
-            1["Todo"]
 
+            classDef TODO        stroke:#f33,stroke-width:3px;
+            classDef DONE        stroke:#0c0,stroke-width:3px;
+            classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+            classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+            classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+            1["Todo"]:::TODO
+
+
+            linkStyle default stroke:gray
             \`\`\`
             "
         `);
diff --git a/tests/StatusRegistryReport.test.StatusRegistryReport_should_create_a_report.approved.md b/tests/StatusRegistryReport.test.StatusRegistryReport_should_create_a_report.approved.md
index abb854c1..ce6b42e2 100644
--- a/tests/StatusRegistryReport.test.StatusRegistryReport_should_create_a_report.approved.md
+++ b/tests/StatusRegistryReport.test.StatusRegistryReport_should_create_a_report.approved.md
@@ -39,16 +39,25 @@ These are the settings actually used by Tasks.
 
 ```mermaid
 flowchart LR
-1["'Todo'<br>[ ] -> [x]<br>(TODO)"]
-2["'Done'<br>[x] -> [ ]<br>(DONE)"]
-3["'In Progress'<br>[/] -> [x]<br>(IN_PROGRESS)"]
-4["'Cancelled'<br>[-] -> [ ]<br>(CANCELLED)"]
-5["'Question'<br>[Q] -> [A]<br>(NON_TASK)"]
-6["'Answer'<br>[A] -> [Q]<br>(NON_TASK)"]
+
+classDef TODO        stroke:#f33,stroke-width:3px;
+classDef DONE        stroke:#0c0,stroke-width:3px;
+classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;
+classDef CANCELLED   stroke:#ddd,stroke-width:3px;
+classDef NON_TASK    stroke:#99e,stroke-width:3px;
+
+1["'Todo'<br>[ ] -> [x]<br>(TODO)"]:::TODO
+2["'Done'<br>[x] -> [ ]<br>(DONE)"]:::DONE
+3["'In Progress'<br>[/] -> [x]<br>(IN_PROGRESS)"]:::IN_PROGRESS
+4["'Cancelled'<br>[-] -> [ ]<br>(CANCELLED)"]:::CANCELLED
+5["'Question'<br>[Q] -> [A]<br>(NON_TASK)"]:::NON_TASK
+6["'Answer'<br>[A] -> [Q]<br>(NON_TASK)"]:::NON_TASK
 1 --> 2
 2 --> 1
 3 --> 2
 4 --> 1
 5 --> 6
 6 --> 5
+
+linkStyle default stroke:gray
 ```