| 1 | # Tiny Mermaid |
| 2 | |
| 3 | This is a tiny version of mermaid that is optimized for the web. It is a subset of the mermaid library and is designed to be used in the browser via CDN. |
| 4 | |
| 5 | ## Lazy loading |
| 6 | |
| 7 | The original mermaid library supports lazy loading, so it will be faster on the initial load, and only load the required diagrams. |
| 8 | This is not supported in the tiny mermaid library. So it's always recommended to use the full mermaid library unless you have a very specific reason to reduce the bundle size. |
| 9 | |
| 10 | ## Removals from mermaid |
| 11 | |
| 12 | This does not support |
| 13 | |
| 14 | - Mindmap Diagram |
| 15 | - Architecture Diagram |
| 16 | - Katex rendering |
| 17 | - Lazy loading |
| 18 | |
| 19 | ## Usage via NPM |
| 20 | |
| 21 | This package is not meant to be installed directly from npm. It is designed to be used via CDN. |
| 22 | If you need to use mermaid in your project, please install the full [`mermaid` package](https://www.npmjs.com/package/mermaid) instead. |
| 23 | |
| 24 | ## Usage via CDN |
| 25 | |
| 26 | ```html |
| 27 | <!-- Format --> |
| 28 | <script src="https://cdn.jsdelivr.net/npm/@mermaid-js/tiny@<MERMAID_MAJOR_VERSION>/dist/mermaid.tiny.js"></script> |
| 29 | |
| 30 | <!-- Pinning major version --> |
| 31 | <script src="https://cdn.jsdelivr.net/npm/@mermaid-js/tiny@11/dist/mermaid.tiny.js"></script> |
| 32 | |
| 33 | <!-- Pinning specific version --> |
| 34 | <script src="https://cdn.jsdelivr.net/npm/@mermaid-js/tiny@11.6.0/dist/mermaid.tiny.js"></script> |
| 35 | ``` |
| 36 | |