From b053a88993f466a718717c137d09b2310b6f324d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 8 Apr 2025 17:07:56 +0530 Subject: [PATCH] docs: Add steps to add examples for new diagrams --- docs/community/new-diagram.md | 10 ++++++++++ packages/mermaid/src/docs/community/new-diagram.md | 10 ++++++++++ 2 files changed, 20 insertions(+) diff --git a/docs/community/new-diagram.md b/docs/community/new-diagram.md index c214afa64..847f3ef35 100644 --- a/docs/community/new-diagram.md +++ b/docs/community/new-diagram.md @@ -111,3 +111,13 @@ const themes = { ``` The actual options and values for the colors are defined in **src/theme/theme-\[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups. + +## Examples + +The `@mermaid-js/examples` package contains a collection of examples that are used by tools like mermaid.live to help users get started with the new diagram. + +You can duplicate an existing diagram example file, eg: `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram. + +Then you can import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array. + +Each diagram should have at least one example, and that should be marked as default. It is good to add more examples to showcase different features of the diagram. diff --git a/packages/mermaid/src/docs/community/new-diagram.md b/packages/mermaid/src/docs/community/new-diagram.md index 16504ca32..147caa121 100644 --- a/packages/mermaid/src/docs/community/new-diagram.md +++ b/packages/mermaid/src/docs/community/new-diagram.md @@ -106,3 +106,13 @@ const themes = { ``` The actual options and values for the colors are defined in **src/theme/theme-[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups. + +## Examples + +The `@mermaid-js/examples` package contains a collection of examples that are used by tools like mermaid.live to help users get started with the new diagram. + +You can duplicate an existing diagram example file, eg: `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram. + +Then you can import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array. + +Each diagram should have at least one example, and that should be marked as default. It is good to add more examples to showcase different features of the diagram.