Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Embedding Mermaid in HTML and Markdown | Getting Started with Mermaid.js
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
Mermaid.js Diagrams with JavaScript

bookEmbedding Mermaid in HTML and Markdown

To include Mermaid diagrams in your HTML pages, you typically use the Mermaid CDN. This makes it easy to add dynamic diagrams without installing extra software. You add a <script> tag in your HTML that loads Mermaid from the CDN, and then write your diagram code inside a <pre><code class="language-mermaid"></code></pre> block. Mermaid will find these blocks and render them as diagrams when the page loads. This approach works in any modern browser and is the most common method for embedding Mermaid in web pages.

index.html

index.html

copy

When writing documentation in Markdown, you can use code fences labeled with mermaid to embed diagrams. Many documentation platforms, like GitHub and some static site generators, support this feature. Just wrap your Mermaid code in triple backticks followed by the word mermaid.

mermaid
graph TD
    A[Start] --> B{Is it sunny?}
    B -- Yes --> C[Go outside]
    B -- No --> D[Stay indoors]
    C --> E[Have fun!]
    D --> E

If your platform supports Mermaid rendering, the diagram will appear in your docs. Always check the platform's documentation to confirm Mermaid compatibility and rendering behavior.

question mark

When embedding Mermaid diagrams in HTML, which of the following is typically required?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 1. Capitolo 3

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

bookEmbedding Mermaid in HTML and Markdown

Scorri per mostrare il menu

To include Mermaid diagrams in your HTML pages, you typically use the Mermaid CDN. This makes it easy to add dynamic diagrams without installing extra software. You add a <script> tag in your HTML that loads Mermaid from the CDN, and then write your diagram code inside a <pre><code class="language-mermaid"></code></pre> block. Mermaid will find these blocks and render them as diagrams when the page loads. This approach works in any modern browser and is the most common method for embedding Mermaid in web pages.

index.html

index.html

copy

When writing documentation in Markdown, you can use code fences labeled with mermaid to embed diagrams. Many documentation platforms, like GitHub and some static site generators, support this feature. Just wrap your Mermaid code in triple backticks followed by the word mermaid.

mermaid
graph TD
    A[Start] --> B{Is it sunny?}
    B -- Yes --> C[Go outside]
    B -- No --> D[Stay indoors]
    C --> E[Have fun!]
    D --> E

If your platform supports Mermaid rendering, the diagram will appear in your docs. Always check the platform's documentation to confirm Mermaid compatibility and rendering behavior.

question mark

When embedding Mermaid diagrams in HTML, which of the following is typically required?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 1. Capitolo 3
some-alt