Repository navigation
docs: add mermaid-classdefs plugin and migrate contributing diagrams, dark and light mode images - #105
Merged
Conversation
Add a markdown-it plugin (docs/.vitepress/plugins/mermaid-classdefs.ts)
that injects five shared classDef declarations into every flowchart/graph
mermaid fence at build time, eliminating per-diagram hex color duplication.
Classes: decision (blue), input (yellow), process (gray), output (green),
neutral (violet) — injected after the diagram-type line, skipped for
sequenceDiagram/gantt/%%{init}%% blocks.
Update vitepress-features.md to document the five canonical classes.
Signed-off-by: Eike Waldt <waldt@b1-systems.de>
On-behalf-of: SAP <eike.waldt@sap.com>
Assisted-by: Kilo:claude-opus-4-7
Assisted-by: Kilo:claude-sonnet-4-6
Signed-off-by: Eike Waldt <waldt@b1-systems.de> On-behalf-of: SAP <eike.waldt@sap.com> Assisted-by: Kilo:claude-opus-4-7 Assisted-by: Kilo:claude-sonnet-4-6
Signed-off-by: Eike Waldt <waldt@b1-systems.de> On-behalf-of: SAP <eike.waldt@sap.com>
✅ Deploy Preview for gardenlinux-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Signed-off-by: Eike Waldt <waldt@b1-systems.de> On-behalf-of: SAP <eike.waldt@sap.com>
Collaborator
|
This looks really good. Though personally I would prefer the dark mode mermaid nodes to actually be dark mode as well with colored outlines/text if necessary. Not sure if this is more trouble than it's worth though? |
Migrate all fill/stroke/color values out of the mermaid-classdefs plugin and into docs/.vitepress/theme/style.css. The plugin now emits only an opacity:1 sentinel per classDef so mermaid does not emit competing !important rules. The CSS adds both a light-mode palette (identical to the previous values) and a dark-mode palette (:root.dark prefix) with deep-tint fills, bright colored strokes, and light text. All declarations use !important to beat mermaid's SVG-scoped id-selector theme rules. Update vitepress-features.md to remove per-class color names and point to style.css as the color source. Signed-off-by: Eike Waldt <waldt@b1-systems.de> On-behalf-of: SAP <eike.waldt@sap.com> Assisted-by: Kilo:claude-opus-4-7 Assisted-by: Kilo:claude-sonnet-4-6
Contributor
Author
|
@ByteOtter Rethought and updated it... css/code is now seperated and we have seperate colors and also outlines inside the dark mode. |
ByteOtter
approved these changes
Jul 8, 2026
ByteOtter
left a comment
ByteOtter
left a comment
Collaborator
There was a problem hiding this comment.
looks great now! Thanks for the work.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this PR does / why we need it:
docs/.vitepress/plugins/mermaid-classdefs.ts) that injects five sharedclassDefdeclarations into every flowchart/graph mermaid fence at build time, eliminating per-diagram hex color duplication. SkipssequenceDiagram,gantt, and%%{init}%%blocks whereclassDefis invalid syntax.decision,input,process,output,neutral— assigned by authors withclass NodeA decision; never written asclassDeforstyle X fill:directly in diagram source.docs/.vitepress/theme/style.css. The plugin emits onlyopacity:1per class (a visually inert sentinel that registers the class name with mermaid without causing mermaid to emit competing!importantfill/stroke rules).theme/style.css. Declarations use!importantto override mermaid's SVG-scoped theme CSS, which is injected with ID-selector specificity (#mermaid-N .node rect { fill: ... }) and would otherwise take precedence over plain class selectors. Dark-mode fills are deep-tinted versions of the light-mode hues with bright colored strokes and light text; node colors switch automatically when the reader toggles the site theme.vitepress-features.mdto document the five canonicabefore
after
Which issue(s) this PR fixes:
Fixes gardenlinux/gardenlinux#4972
Fixes gardenlinux/gardenlinux#4971