# Adding Mermaid diagrams to Hugo

DevFeed: [Adding Mermaid diagrams to Hugo](<https://devfeed.tech/articles/adding-mermaid-diagrams-to-hugo-27695.md>)

Original publisher: [Read original article](<https://gagor.pro/2024/02/adding-mermaid-diagrams-to-hugo/>)

Author: Tom

Published: 2024-02-25T00:00:00Z

Content type: tutorial

Language: en

Sources: [Tomasz Gągor](<https://devfeed.tech/sources/tomasz-gagor.md>)

Topics: [Hugo](<https://devfeed.tech/topics/hugo.md>), [Markdown](<https://devfeed.tech/topics/markdown.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [hugo](<https://devfeed.tech/tags/hugo.md>), [hugo-diagrams](<https://devfeed.tech/tags/hugo-diagrams.md>), [hugo-mermaid-integration](<https://devfeed.tech/tags/hugo-mermaid-integration.md>), [interactive-diagrams-hugo](<https://devfeed.tech/tags/interactive-diagrams-hugo.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [learn](<https://devfeed.tech/tags/learn.md>), [markdown](<https://devfeed.tech/tags/markdown.md>), [mermaid](<https://devfeed.tech/tags/mermaid.md>), [mermaid-diagrams](<https://devfeed.tech/tags/mermaid-diagrams.md>), [static-site](<https://devfeed.tech/tags/static-site.md>), [static-site-diagrams](<https://devfeed.tech/tags/static-site-diagrams.md>)

## AI overview

A tutorial on adding Mermaid diagrams to Hugo sites by extending Hugo with a custom file and loading Mermaid JavaScript once per page. The diagrams can then be inserted in Markdown files.

## Source excerpt

Learn how to add and optimize Mermaid diagrams in Hugo, enhancing your static site with dynamic and interactive diagrams.