https://github.com/gethinode/mod-mermaid
A Hugo module to add diagrams and charts powered by Mermaid to your Hinode site
https://github.com/gethinode/mod-mermaid
Last synced: 4 months ago
JSON representation
A Hugo module to add diagrams and charts powered by Mermaid to your Hinode site
- Host: GitHub
- URL: https://github.com/gethinode/mod-mermaid
- Owner: gethinode
- License: mit
- Created: 2024-05-22T08:07:53.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2026-02-10T04:03:47.000Z (4 months ago)
- Last Synced: 2026-02-10T09:34:59.183Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 11.7 MB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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][hugo], an open-source static site generator. Hinode is available as a [template][repository_template], and a [main theme][repository]. This repository maintains a Hugo module to add [Mermaid][mermaid] to a Hinode site. Visit the Hinode documentation site for [installation instructions][hinode_docs].
## 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](https://mermaid.js.org/config/theming.html) 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.
```scss
// 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][semantic-release] to automate the release of new versions. The package uses `husky` and `commitlint` to ensure commit messages adhere to the [Conventional Commits][conventionalcommits] specification. You can run `npx git-cz` from the terminal to help prepare the commit message.
[hugo]: https://gohugo.io
[hinode_docs]: https://gethinode.com
[mermaid]: https://mermaid.js.org
[repository]: https://github.com/gethinode/hinode.git
[repository_template]: https://github.com/gethinode/template.git
[conventionalcommits]: https://www.conventionalcommits.org
[husky]: https://typicode.github.io/husky/
[semantic-release]: https://semantic-release.gitbook.io/