@gethinode/mod-mermaid

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);
    //...
}

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.