vite-mermaid

Lookups for all Mermaid diagrams in files, renders, bundles, optimizes and replaces with links without headless browser.

Description

A much quicker approach to render Mermaid Diagrams because this library doesn't use any browser to do so, instead it polyfills DOM SVG getBBox method and Canvas, then renders Mermaid diagrams and transforms files.

It's very precise, although there could be micro misalignments - report any misbehavior.

Example: |Name|Comparison| |----|----------| |Mermaid render|5s (mermaid-cli) -> 0.5s (vite-mermaid) - 10x speed improvement| |SVG Optimization|148kb gzip -> 31kb gzip - 80% reduction on average, which is much smaller than the whole mermaid library|

Options

|Option|Description| |------|-----------| |format|png or svg value what file format to render as (default: svg).| |bundled|boolean value wether to bundle all rendered files into one (default: true).| |optimized|boolean value wether to optimize rendered files (default: true).| |include|Which files to include for Mermaid diagrams lookup and replacement (default: md, mdx).| |mermaid|Mermaid config.|

Roadmap

Please, consider contribution or engagement in discussions to help evolve this library.

• [ ] Bundling to png format and selecting correct image with background-position
• [ ] Proper support of diagrams in beta
• [ ] Parallel rendering of Mermaid diagrams (mermaid queues processes internally)