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: about 2 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 (8 months ago)
• Default Branch: main
• Last Pushed: 2024-10-24T03:11:14.000Z (3 months ago)
• Last Synced: 2024-10-24T20:11:42.474Z (3 months ago)
• Language: SCSS
• Homepage:
• Size: 4.3 MB
• Stars: 2
• Watchers: 0
• Forks: 1
• Open Issues: 1
• 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

![Logo](https://raw.githubusercontent.com/gethinode/hinode/main/static/img/logo.png)

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);

    //...

}

```

## 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/