[WIP] Migrate from @sntke/antora-mermaid-extension to Beautiful Mermaid#10066
Draft
rosieyohannan wants to merge 2 commits intomainfrom
Draft
[WIP] Migrate from @sntke/antora-mermaid-extension to Beautiful Mermaid#10066rosieyohannan wants to merge 2 commits intomainfrom
rosieyohannan wants to merge 2 commits intomainfrom
Conversation
Replace client-side Mermaid rendering with build-time rendering using Beautiful Mermaid. This provides faster page loads and instant theme switching between light and dark modes. Changes: - Install beautiful-mermaid package (replaces @sntke/antora-mermaid-extension) - Create beautiful-mermaid-extension.js: Custom Asciidoctor extension that renders diagrams at build time with dual SVG variants - Create mermaid-renderer.mjs: ES module helper for Beautiful Mermaid - Update antora-playbook.yml: Register extension in asciidoc.extensions - Update ui/src/css/doc.css: Add theme-aware CSS for instant diagram switching with !important rules for proper specificity - Update markdown-export-extension.js: Handle new diagram container structure when exporting to markdown - Update using-images.adoc: Document Beautiful Mermaid approach - Update workflows.adoc: Use composite states for better ELK layout Theme configuration: - Light theme: CircleCI green (#8542) with light backgrounds - Dark theme: Lighter green (#94E5AB) with dark backgrounds - Configurable: Can switch between 15 built-in themes or custom colors by editing extensions/beautiful-mermaid-extension.js lines 67-94 Technical details: - Uses ELK (Eclipse Layout Kernel) for diagram layout - Renders two SVG variants per diagram (light + dark) at build time - CSS controls visibility based on html[data-theme] attribute - Full backward compatibility with existing [mermaid] AsciiDoc blocks Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add support for diagram captions that appear below mermaid diagrams, matching AsciiDoc's standard image caption behavior. Both diagrams and titles are now centered for better visual presentation. Changes: - extensions/beautiful-mermaid-extension.js: - Render title div after mermaid-diagram-container - Update light theme: white background (#ffffff), added muted and border colors - Update dark theme: added muted color (#565f89) - ui/src/css/doc.css: - Add .mermaid-diagram-container + .title to styled title selectors - Center diagrams using flexbox (justify-content: center) - Center titles with text-align: center - Add margin: 0 auto to SVG elements - docs/contributors/modules/docs-style/pages/using-images.adoc: - Fix example sequence diagram syntax (was missing participant names) Diagram titles now display consistently with image captions, positioned below the diagram and centered. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
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
1 participant
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.
Replace client-side Mermaid rendering with build-time rendering using Beautiful Mermaid. This provides faster page loads and instant theme switching between light and dark modes.
Changes:
Theme configuration:
Technical details: