Hinode Module - Mermaid

A Hugo module to add diagrams and charts powered by Mermaid to your Hinode site

About

Hinode is a clean blog theme for Hugo, an open-source static site generator. Hinode is available as a template, and a main theme. This repository maintains a Hugo module to add Mermaid to a Hinode site. Visit the Hinode documentation site for installation instructions.

Usage

The module is "optional" per default. In this case the module must be enabled in the frontmatter of the pages that use mermaid by adding: modules: ["mermaid"]

Mermaid can be used in fenced codeblocks:

```mermaid
YOUR DIAGRAMS
```

or as shortcode:

{{< mermaid >}}
YOUR DIAGRAM
{{< /mermaid >}}

The module supports dark mode and allows creation of a custom mermaid theme by overriding and setting the theme variables in assets/scss/mermaid.scss. Checkout the mermaid docs for custom styling. All theme variables can be used, but in kebab case and with prefix as shown in the example below. Also Bootstrap theme variables can be referenced.

// assets/scss/mermaid.scss

[data-mermaid-theme="light"] {
    // The Mermaid Theme (only 'base' does support custom theming)
    --mermaid-theme: 'base';
    // General Theme Variables
    --mermaid-dark-mode: false;
    --mermaid-background: var(--bs-body-bg);
    --mermaid-font-family: var(--bs-font-sans-serif);
    //...
}

[data-mermaid-theme="dark"] {
    // The Mermaid Theme (only 'base' does support custom theming)
    --mermaid-theme: 'base';
    // General Theme Variables
    --mermaid-dark-mode: true;
    --mermaid-background: var(--bs-body-bg);
    --mermaid-font-family: var(--bs-font-sans-serif);
    //...
}

Configuration

This module supports the following parameters (see the section params.modules in config.toml):

Setting	Default	Description
mermaid.elk	false	If set, installs the layout engine for Mermaid based on the ELK layout engine.
mermaid.layout	dagre	Defines which layout algorithm to use for rendering Mermaid diagrams. The default algorithm is dagre. Additional options are available when mermaid.elk is enabled, see the table below.
mermaid.look	classic	Defines the default look for Mermaid diagrams, either classic or handDrawn.

The following table defines the available layout algorithms. The elk values require installation of the ELK layout engine (set mermaid.elk to true).

Layout	Description
dagre	The default Mermaid layout.
elk	The default ELK layout, which is elk.layered.
elk.layered	Layered layout.
elk.stress	Stress layout.
elk.force	Force layout.
elk.mrtree	Multi-root tree layout.
elk.sporeOverlap	Spore overlap layout.

Contributing

This module uses semantic-release to automate the release of new versions. The package uses husky and commitlint to ensure commit messages adhere to the Conventional Commits specification. You can run npx git-cz from the terminal to help prepare the commit message.