mermaid-icon

This shortcode inserts a specified SVG icon from the /images/icons/diagram/ directory into a Mermaid diagram node, in the format {{% mermaid-icon "icon-name" %}}.

You must use the % delimiter. Do not use this shortcode outside of Mermaid code blocks.

Tip

You only need to insert an icon once per node. For example, once you insert an icon to the node InternetG, you can reference InternetG again without needing to repeat the shortcode. For more details, see our Mermaid style guide.

Examples

```mermaid
flowchart LR
    subgraph Datacenter Region
        subgraph VPC 10.0.220.0/16
            ServerA({{% mermaid-icon "SSDs" %}}  Web Server) --> InternetG({{% mermaid-icon "SSDs" %}}  Internet Gateway)
            ServerB({{% mermaid-icon "SSDs" %}}  Web Server)  --> InternetG
            ServerC({{% mermaid-icon "SSDs" %}}  Web Server)  --> InternetG
        end
    end
    InternetG --> Internet({{% mermaid-icon "global-data-centers" %}}  Internet)
```

Renders to:

flowchart LR subgraph Datacenter Region subgraph VPC 10.0.220.0/16 ServerA( Web Server) --> InternetG( Internet Gateway) ServerB( Web Server) --> InternetG ServerC( Web Server) --> InternetG end end InternetG --> Internet( Internet)