lukilabs/beautiful-mermaid
Beautiful Mermaid
This project is a renderer and theme engine for Mermaid.js that converts diagram syntax into styled SVG graphics and ASCII text. It provides a type-safe diagram editor and a pipeline for transforming diagram source code into scalable vector graphics or plain text visuals.
The system features a dedicated theme engine that maps editor colors and CSS variables to diagram elements. It enables dynamic diagram theming through CSS custom properties for real-time color updates and supports index-based styling to override the appearance of specific nodes and edges.
The tool covers a range of visualization capabilities, including the generation of XY charts and flowcharts. It supports various output formats, ranging from browser-based SVG rendering to Unicode-based ASCII art for terminal environments.
Features
- Diagram Renderers - Converts Mermaid syntax into highly customized SVG graphics or ASCII text visuals.
- Theme Style Customizations - Provides a comprehensive theme engine for customizing diagram appearances via pre-set themes and custom color palettes.
- SVG Diagramming Libraries - Implements a pipeline to generate scalable vector graphics from diagram source code.
- SVG-Based Vector Rendering - Generates visual diagrams by converting structured graph data into scalable vector graphics strings.
- ASCII Renderers - Translates diagram layouts into plain text using Unicode box-drawing characters for terminal environments.
- CSS Variable Theming - Implements a theming system that maps design tokens to native CSS variables for real-time styling updates.
- Dynamic Theming - Enables real-time updates to diagram colors and styles through dynamic CSS custom property mapping.
- CSS Variable Styling Systems - Implements a system using CSS custom properties for real-time, instant updates to diagram colors without re-rendering.
- Component Appearance Customizers - Offers theme variants and options to customize the visual style, borders, and fonts of diagram elements.
- Diagram Element Styling - Allows extensive customization of Mermaid diagram elements using themes, palettes, and CSS.
- Documentation Visualization Tools - Generates consistent, branded, and themed diagrams tailored for technical documentation workflows.
- XY Charts - Provides the ability to render bar and line charts with categorical or numeric axes.
- Diagram Structure Parsing - Transforms raw domain-specific language text into structured graph objects for programmatic manipulation.
- Visual Diagram Editors - Transforms domain-specific language into visual diagrams with various node shapes and layout options.
- Type-Safe Diagram Editors - Provides a type-safe interface for the programmatic creation and styling of visual diagrams.
- Chart Generators - Automatically generates styled XY charts and flowcharts from structured text definitions.
- Element Overrides - Supports overriding specific edge colors and stroke widths using index-based styling declarations.
- Type-Safe Theme Customization - Ensures theme and layout consistency through a type-safe configuration pipeline for visual styles.
