Overview

The eleventy-plugin-mermaid is a powerful tool designed to seamlessly integrate Mermaid diagrams into Eleventy static sites. With its simple installation process and intuitive configuration options, users can easily create dynamic and visually appealing diagrams that enhance their web content. This plugin not only facilitates the inclusion of Mermaid diagrams but also ensures that developers can customize and personalize their diagrams to fit various needs.

By extending the Eleventy markdown highlighter, this plugin allows for inline diagram creation, streamlining the workflow for developers and enabling them to present information in a more engaging format. The plugin supports modern JavaScript syntax and provides a user-friendly approach to managing diagram configurations.

Features

Easy Installation: Simply install via npm and include it in your .eleventy.js config file to get started with minimal effort.
Inline Configuration: Supports inline configuration for easy customization of individual graphs using Mermaid's built-in capabilities.
Custom Options: Offers a variety of global config options, such as adjusting the script source and customizing the HTML tag for rendering.
Flexible CSS Classes: Allows users to add extra CSS classes to the wrapping element of the diagrams for more styling control.
Automatic Initialization: Includes automatic loading features with the option to define custom settings for Mermaid initialization.
Version Management: The plugin manages compatibility by pinning MermaidJS versions, ensuring stability while allowing users to override defaults if needed.
Future Enhancements: Plans for generating SVG server-side during builds indicate ongoing development and improvements.
Markdown Highlighter Integration: Extends Eleventy's markdown highlighter capabilities to facilitate easy diagram embedding within markdown files.

Kevingimbel

Eleventy Plugin Mermaid

Hugo Shortcodes