| 6dd74de | | | 1 | # @mermaid-js/examples |
| 6dd74de | | | 2 | |
| 6dd74de | | | 3 | The `@mermaid-js/examples` package contains a collection of examples used by tools like [mermaid.live](https://mermaid.live) to help users get started with new diagrams. |
| 6dd74de | | | 4 | |
| 6dd74de | | | 5 | You can duplicate an existing diagram example file, e.g., `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram. |
| 6dd74de | | | 6 | |
| 6dd74de | | | 7 | Then, import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array. |
| 6dd74de | | | 8 | |
| 6dd74de | | | 9 | Each diagram should have at least one example, which should be marked as the default. It's a good idea to add more examples to showcase different features of the diagram. |
| 6dd74de | | | 10 | |
| 6dd74de | | | 11 | ## Usage |
| 6dd74de | | | 12 | |
| 6dd74de | | | 13 | ```bash |
| 6dd74de | | | 14 | pnpm add @mermaid-js/examples |
| 6dd74de | | | 15 | ``` |
| 6dd74de | | | 16 | |
| 6dd74de | | | 17 | A sample usage of the package in mermaid.live, to get the default example for every diagram type: |
| 6dd74de | | | 18 | |
| 6dd74de | | | 19 | ```ts |
| 6dd74de | | | 20 | import { diagramData } from '@mermaid-js/examples'; |
| 6dd74de | | | 21 | |
| 6dd74de | | | 22 | type DiagramDefinition = (typeof diagramData)[number]; |
| 6dd74de | | | 23 | |
| 6dd74de | | | 24 | const isValidDiagram = (diagram: DiagramDefinition): diagram is Required<DiagramDefinition> => { |
| 6dd74de | | | 25 | return Boolean(diagram.name && diagram.examples && diagram.examples.length > 0); |
| 6dd74de | | | 26 | }; |
| 6dd74de | | | 27 | |
| 6dd74de | | | 28 | export const getSampleDiagrams = () => { |
| 6dd74de | | | 29 | const diagrams = diagramData |
| 6dd74de | | | 30 | .filter((d) => isValidDiagram(d)) |
| 6dd74de | | | 31 | .map(({ examples, ...rest }) => ({ |
| 6dd74de | | | 32 | ...rest, |
| 6dd74de | | | 33 | example: examples?.filter(({ isDefault }) => isDefault)[0], |
| 6dd74de | | | 34 | })); |
| 6dd74de | | | 35 | const examples: Record<string, string> = {}; |
| 6dd74de | | | 36 | for (const diagram of diagrams) { |
| 6dd74de | | | 37 | examples[diagram.name.replace(/ (Diagram|Chart|Graph)/, '')] = diagram.example.code; |
| 6dd74de | | | 38 | } |
| 6dd74de | | | 39 | return examples; |
| 6dd74de | | | 40 | }; |
| 6dd74de | | | 41 | ``` |