From 68670535bf9b9a9874a745eed24a82146bc3a1d8 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 18 Apr 2025 17:16:51 +0530 Subject: [PATCH] docs: Update tiny docs --- docs/config/usage.md | 5 +++++ docs/intro/index.md | 1 + packages/mermaid/src/docs/config/usage.md | 5 +++++ packages/mermaid/src/docs/intro/index.md | 1 + packages/tiny/README.md | 12 +++++++++--- 5 files changed, 21 insertions(+), 3 deletions(-) diff --git a/docs/config/usage.md b/docs/config/usage.md index 2e207213c..b7cd2874d 100644 --- a/docs/config/usage.md +++ b/docs/config/usage.md @@ -98,6 +98,11 @@ Mermaid can load multiple diagrams, in the same page. > Try it out, save this code as HTML and load it using any browser. > (Except Internet Explorer, please don't use Internet Explorer.) +## Tiny Mermaid + +We have a smaller version of mermaid that is almost half the size of the full library. +If you need a leaner version without some additional features, you can use the [Mermaid Tiny](https://github.com/mermaid-js/mermaid/tree/develop/packages/tiny) library. + ## Enabling Click Event and Tags in Nodes A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduced in version 8.2 as a security improvement, aimed at preventing malicious use. diff --git a/docs/intro/index.md b/docs/intro/index.md index 06a408268..51dd9f9d4 100644 --- a/docs/intro/index.md +++ b/docs/intro/index.md @@ -354,6 +354,7 @@ To Deploy Mermaid: - [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor) - [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli) +- [Mermaid Tiny](https://github.com/mermaid-js/mermaid/tree/develop/packages/tiny) - [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo) - [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo) diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md index 0886a0e44..b48495151 100644 --- a/packages/mermaid/src/docs/config/usage.md +++ b/packages/mermaid/src/docs/config/usage.md @@ -92,6 +92,11 @@ Mermaid can load multiple diagrams, in the same page. > Try it out, save this code as HTML and load it using any browser. > (Except Internet Explorer, please don't use Internet Explorer.) +## Tiny Mermaid + +We have a smaller version of mermaid that is almost half the size of the full library. +If you need a leaner version without some additional features, you can use the [Mermaid Tiny](https://github.com/mermaid-js/mermaid/tree/develop/packages/tiny) library. + ## Enabling Click Event and Tags in Nodes A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduced in version 8.2 as a security improvement, aimed at preventing malicious use. diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md index ff37d549b..f8aef36f1 100644 --- a/packages/mermaid/src/docs/intro/index.md +++ b/packages/mermaid/src/docs/intro/index.md @@ -109,6 +109,7 @@ To Deploy Mermaid: - [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor) - [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli) +- [Mermaid Tiny](https://github.com/mermaid-js/mermaid/tree/develop/packages/tiny) - [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo) - [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo) diff --git a/packages/tiny/README.md b/packages/tiny/README.md index b01b0c4a8..a877a95da 100644 --- a/packages/tiny/README.md +++ b/packages/tiny/README.md @@ -2,10 +2,10 @@ 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. -## Usage via NPM +## Lazy loading -This package is not meant to be installed directly from npm. It is designed to be used via CDN. -If you need to use mermaid in your project, please install the full [`mermaid` package](https://www.npmjs.com/package/mermaid) instead. +The original mermaid library supports lazy loading, so it will be faster on the initial load, and only load the required diagrams. +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. ## Removals from mermaid @@ -14,6 +14,12 @@ This does not support - Mindmap Diagram - Architecture Diagram - Katex rendering +- Lazy loading + +## Usage via NPM + +This package is not meant to be installed directly from npm. It is designed to be used via CDN. +If you need to use mermaid in your project, please install the full [`mermaid` package](https://www.npmjs.com/package/mermaid) instead. ## Usage via CDN