eleventy-plugin-mermaid

Integrate Mermaid graphs with eleventy

View on GitHub | View on NPM

This plugin integrate the Mermaid graphic library with Eleventy, all that is needed is a Code Block with the mermaid language tag.

See GitHub Readme for setup instructions.

Examples

The following graphs are all rendered with the plugin, see source code of this page on GitHub.

graph TD;
A[Want graphs in 11ty] -->|Search Plugin| B[Find plugin];
B --> C{Use plugin?};
C -->|Yes| D[NICE GRAPHS];
C -->|No| E[NO GRAPHS];
graph LR;
A[Install plugin] --> B[???] --> C[Profit];
graph BT
A --- B
B-->C[C]
B-->D(D);
pie title My pie chart
  "Eaten": 30
  "Not eaten": 70
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"