mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-12-04 03:24:13 +01:00
Merge branch 'develop' into multi-line-er-label
This commit is contained in:
Sidharth Vinod
@@ -16,7 +16,7 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/rendering-util/render.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L9)
|
||||
[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
|
||||
|
||||
---
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)
|
||||
[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
|
||||
|
||||
---
|
||||
|
||||
@@ -36,4 +36,4 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/rendering-util/render.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L7)
|
||||
[packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)
|
||||
|
||||
@@ -28,7 +28,7 @@ page.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
|
||||
[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
|
||||
|
||||
---
|
||||
|
||||
@@ -59,7 +59,7 @@ A graph definition key
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
|
||||
[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
|
||||
|
||||
---
|
||||
|
||||
@@ -89,7 +89,7 @@ Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
|
||||
[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
|
||||
|
||||
---
|
||||
|
||||
@@ -116,56 +116,13 @@ This function should be called before the run function.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
|
||||
|
||||
---
|
||||
|
||||
### internalHelpers
|
||||
|
||||
• **internalHelpers**: `Object`
|
||||
|
||||
Internal helpers for mermaid
|
||||
|
||||
**`Deprecated`**
|
||||
|
||||
- This should not be used by external packages, as the definitions will change without notice.
|
||||
|
||||
#### Type declaration
|
||||
|
||||
| Name | Type |
|
||||
| :--------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `common` | { `evaluate`: (`val?`: `string` \| `boolean`) => `boolean` ; `getMax`: (...`values`: `number`\[]) => `number` ; `getMin`: (...`values`: `number`\[]) => `number` ; `getRows`: (`s?`: `string`) => `string`\[] ; `getUrl`: (`useAbsolute`: `boolean`) => `string` ; `hasBreaks`: (`text`: `string`) => `boolean` ; `lineBreakRegex`: `RegExp` ; `removeScript`: (`txt`: `string`) => `string` ; `sanitizeText`: (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` ; `sanitizeTextOrArray`: (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[] ; `splitBreaks`: (`text`: `string`) => `string`\[] } |
|
||||
| `common.evaluate` | (`val?`: `string` \| `boolean`) => `boolean` |
|
||||
| `common.getMax` | (...`values`: `number`\[]) => `number` |
|
||||
| `common.getMin` | (...`values`: `number`\[]) => `number` |
|
||||
| `common.getRows` | (`s?`: `string`) => `string`\[] |
|
||||
| `common.getUrl` | (`useAbsolute`: `boolean`) => `string` |
|
||||
| `common.hasBreaks` | (`text`: `string`) => `boolean` |
|
||||
| `common.lineBreakRegex` | `RegExp` |
|
||||
| `common.removeScript` | (`txt`: `string`) => `string` |
|
||||
| `common.sanitizeText` | (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` |
|
||||
| `common.sanitizeTextOrArray` | (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[] |
|
||||
| `common.splitBreaks` | (`text`: `string`) => `string`\[] |
|
||||
| `getConfig` | () => [`MermaidConfig`](mermaid.MermaidConfig.md) |
|
||||
| `insertCluster` | (`elem`: `any`, `node`: `any`) => `any` |
|
||||
| `insertEdge` | (`elem`: `any`, `edge`: `any`, `clusterDb`: `any`, `diagramType`: `any`, `startNode`: `any`, `endNode`: `any`, `id`: `any`) => { `originalPath`: `any` ; `updatedPath`: `any` } |
|
||||
| `insertEdgeLabel` | (`elem`: `any`, `edge`: `any`) => `Promise`<`any`> |
|
||||
| `insertMarkers` | (`elem`: `any`, `markerArray`: `any`, `type`: `any`, `id`: `any`) => `void` |
|
||||
| `insertNode` | (`elem`: `any`, `node`: `any`, `dir`: `any`) => `Promise`<`any`> |
|
||||
| `interpolateToCurve` | (`interpolate`: `undefined` \| `string`, `defaultCurve`: `CurveFactory`) => `CurveFactory` |
|
||||
| `labelHelper` | (`parent`: `any`, `node`: `any`, `_classes`: `any`) => `Promise`<{ `bbox`: `any` ; `halfPadding`: `number` ; `label`: `any` = labelEl; `shapeSvg`: `any` }> |
|
||||
| `log` | `Record`<`LogLevel`, (...`data`: `any`\[]) => `void`(`message?`: `any`, ...`optionalParams`: `any`\[]) => `void`> |
|
||||
| `positionEdgeLabel` | (`edge`: `any`, `paths`: `any`) => `void` |
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
|
||||
[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
|
||||
|
||||
---
|
||||
|
||||
### mermaidAPI
|
||||
|
||||
• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
|
||||
• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`userOptions`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
|
||||
|
||||
**`Deprecated`**
|
||||
|
||||
@@ -173,7 +130,7 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:421](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L421)
|
||||
[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424)
|
||||
|
||||
---
|
||||
|
||||
@@ -223,7 +180,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:422](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L422)
|
||||
[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
|
||||
|
||||
---
|
||||
|
||||
@@ -233,7 +190,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:416](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L416)
|
||||
[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)
|
||||
|
||||
---
|
||||
|
||||
@@ -261,7 +218,7 @@ Used to register external diagram types.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
|
||||
[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
|
||||
|
||||
---
|
||||
|
||||
@@ -285,7 +242,7 @@ Used to register external diagram types.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429)
|
||||
[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
|
||||
|
||||
---
|
||||
|
||||
@@ -311,7 +268,7 @@ Used to register external diagram types.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:423](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L423)
|
||||
[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
|
||||
|
||||
---
|
||||
|
||||
@@ -359,7 +316,7 @@ Renders the mermaid diagrams
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:428](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L428)
|
||||
[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
|
||||
|
||||
---
|
||||
|
||||
@@ -394,7 +351,7 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
|
||||
[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
|
||||
|
||||
---
|
||||
|
||||
@@ -404,4 +361,4 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:415](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L415)
|
||||
[packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)
|
||||
|
||||
19
docs/config/setup/interfaces/mermaid.RenderOptions.md
Normal file
19
docs/config/setup/interfaces/mermaid.RenderOptions.md
Normal file
@@ -0,0 +1,19 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md).
|
||||
|
||||
# Interface: RenderOptions
|
||||
|
||||
[mermaid](../modules/mermaid.md).RenderOptions
|
||||
|
||||
## Properties
|
||||
|
||||
### algorithm
|
||||
|
||||
• `Optional` **algorithm**: `string`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)
|
||||
@@ -18,7 +18,7 @@ The nodes to render. If this is set, `querySelector` will be ignored.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L45)
|
||||
[packages/mermaid/src/mermaid.ts:48](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L48)
|
||||
|
||||
---
|
||||
|
||||
@@ -44,7 +44,7 @@ A callback to call after each diagram is rendered.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:49](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L49)
|
||||
[packages/mermaid/src/mermaid.ts:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L52)
|
||||
|
||||
---
|
||||
|
||||
@@ -56,7 +56,7 @@ The query selector to use when finding elements to render. Default: `".mermaid"`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:41](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L41)
|
||||
[packages/mermaid/src/mermaid.ts:44](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L44)
|
||||
|
||||
---
|
||||
|
||||
@@ -68,4 +68,4 @@ If `true`, errors will be logged to the console, but not thrown. Default: `false
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:53](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L53)
|
||||
[packages/mermaid/src/mermaid.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L56)
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/defaultConfig.ts:279](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L279)
|
||||
[packages/mermaid/src/defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -20,11 +20,22 @@
|
||||
- [MermaidConfig](../interfaces/mermaid.MermaidConfig.md)
|
||||
- [ParseOptions](../interfaces/mermaid.ParseOptions.md)
|
||||
- [ParseResult](../interfaces/mermaid.ParseResult.md)
|
||||
- [RenderOptions](../interfaces/mermaid.RenderOptions.md)
|
||||
- [RenderResult](../interfaces/mermaid.RenderResult.md)
|
||||
- [RunOptions](../interfaces/mermaid.RunOptions.md)
|
||||
|
||||
## Type Aliases
|
||||
|
||||
### InternalHelpers
|
||||
|
||||
Ƭ **InternalHelpers**: typeof `internalHelpers`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)
|
||||
|
||||
---
|
||||
|
||||
### ParseErrorFunction
|
||||
|
||||
Ƭ **ParseErrorFunction**: (`err`: `string` | [`DetailedError`](../interfaces/mermaid.DetailedError.md) | `unknown`, `hash?`: `any`) => `void`
|
||||
@@ -48,6 +59,26 @@
|
||||
|
||||
[packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
|
||||
|
||||
---
|
||||
|
||||
### SVG
|
||||
|
||||
Ƭ **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
|
||||
|
||||
---
|
||||
|
||||
### SVGGroup
|
||||
|
||||
Ƭ **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132)
|
||||
|
||||
## Variables
|
||||
|
||||
### default
|
||||
@@ -56,4 +87,4 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
|
||||
[packages/mermaid/src/mermaid.ts:440](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L440)
|
||||
|
||||
@@ -56,8 +56,10 @@ To add an integration to this list, see the [Integrations - create page](./integ
|
||||
- [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
|
||||
- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
|
||||
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
|
||||
- [MonsterWriter](https://www.monsterwriter.com/) ✅
|
||||
- [Joplin](https://joplinapp.org) ✅
|
||||
- [LiveBook](https://livebook.dev) ✅
|
||||
- [Slidev](https://sli.dev) ✅
|
||||
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
|
||||
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
|
||||
- [Mermerd](https://github.com/KarnerTh/mermerd)
|
||||
@@ -133,7 +135,7 @@ Communication tools and platforms
|
||||
### Wikis
|
||||
|
||||
- [DokuWiki](https://dokuwiki.org)
|
||||
- [ComboStrap](https://combostrap.com/mermaid)
|
||||
- [ComboStrap](https://combostrap.com/utility/create-diagram-with-mermaid-vh3ab9yj)
|
||||
- [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
|
||||
- [Foswiki](https://foswiki.org)
|
||||
- [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
|
||||
|
||||
@@ -12,7 +12,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
|
||||
|
||||
<br />
|
||||
|
||||
<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
|
||||
<a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
|
||||
|
||||
## About
|
||||
|
||||
|
||||
@@ -83,3 +83,139 @@ Allows for the limited reconfiguration of a diagram just before it is rendered.
|
||||
### [Theme Manipulation](../config/theming.md)
|
||||
|
||||
An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
|
||||
|
||||
### Layout and look
|
||||
|
||||
We've restructured how Mermaid renders diagrams, enabling new features like selecting layout and look. **Currently, this is supported for flowcharts and state diagrams**, with plans to extend support to all diagram types.
|
||||
|
||||
### Selecting Diagram Looks
|
||||
|
||||
Mermaid offers a variety of styles or “looks” for your diagrams, allowing you to tailor the visual appearance to match your specific needs or preferences. Whether you prefer a hand-drawn or classic style, you can easily customize your diagrams.
|
||||
|
||||
**Available Looks:**
|
||||
|
||||
```
|
||||
• Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams.
|
||||
• Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic.
|
||||
```
|
||||
|
||||
**How to Select a Look:**
|
||||
|
||||
You can select a look by adding the look parameter in the metadata section of your Mermaid diagram code. Here’s an example:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
look: handDrawn
|
||||
theme: neutral
|
||||
---
|
||||
flowchart LR
|
||||
A[Start] --> B{Decision}
|
||||
B -->|Yes| C[Continue]
|
||||
B -->|No| D[Stop]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
look: handDrawn
|
||||
theme: neutral
|
||||
---
|
||||
flowchart LR
|
||||
A[Start] --> B{Decision}
|
||||
B -->|Yes| C[Continue]
|
||||
B -->|No| D[Stop]
|
||||
```
|
||||
|
||||
#### Selecting Layout Algorithms
|
||||
|
||||
In addition to customizing the look of your diagrams, Mermaid Chart now allows you to choose different layout algorithms to better organize and present your diagrams, especially when dealing with more complex structures. The layout algorithm dictates how nodes and edges are arranged on the page.
|
||||
|
||||
#### Supported Layout Algorithms:
|
||||
|
||||
```
|
||||
• Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams.
|
||||
• ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support.
|
||||
```
|
||||
|
||||
#### How to Select a Layout Algorithm:
|
||||
|
||||
You can specify the layout algorithm directly in the metadata section of your Mermaid diagram code. Here’s an example:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
look: handDrawn
|
||||
theme: dark
|
||||
---
|
||||
flowchart TB
|
||||
A[Start] --> B{Decision}
|
||||
B -->|Yes| C[Continue]
|
||||
B -->|No| D[Stop]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
look: handDrawn
|
||||
theme: dark
|
||||
---
|
||||
flowchart TB
|
||||
A[Start] --> B{Decision}
|
||||
B -->|Yes| C[Continue]
|
||||
B -->|No| D[Stop]
|
||||
```
|
||||
|
||||
In this example, the `layout: elk` line configures the diagram to use the ELK layout algorithm, along with the hand drawn look and forest theme.
|
||||
|
||||
#### Customizing ELK Layout:
|
||||
|
||||
When using the ELK layout, you can further refine the diagram’s configuration, such as how nodes are placed and whether parallel edges should be combined:
|
||||
|
||||
- To combine parallel edges, use mergeEdges: true | false.
|
||||
- To configure node placement, use nodePlacementStrategy with the following options:
|
||||
- SIMPLE
|
||||
- NETWORK_SIMPLEX
|
||||
- LINEAR_SEGMENTS
|
||||
- BRANDES_KOEPF (default)
|
||||
|
||||
**Example configuration:**
|
||||
|
||||
```
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
elk:
|
||||
mergeEdges: true
|
||||
nodePlacementStrategy: LINEAR_SEGMENTS
|
||||
---
|
||||
flowchart LR
|
||||
A[Start] --> B{Choose Path}
|
||||
B -->|Option 1| C[Path 1]
|
||||
B -->|Option 2| D[Path 2]
|
||||
|
||||
#### Using Dagre Layout with Classic Look:
|
||||
```
|
||||
|
||||
Another example:
|
||||
|
||||
```
|
||||
---
|
||||
config:
|
||||
layout: dagre
|
||||
look: classic
|
||||
theme: default
|
||||
---
|
||||
|
||||
flowchart LR
|
||||
A[Start] --> B{Choose Path}
|
||||
B -->|Option 1| C[Path 1]
|
||||
B -->|Option 2| D[Path 2]
|
||||
|
||||
```
|
||||
|
||||
These options give you the flexibility to create diagrams that not only look great but are also arranged to best suit your data’s structure and flow.
|
||||
|
||||
When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk.
|
||||
|
||||
@@ -6,6 +6,48 @@
|
||||
|
||||
# Blog
|
||||
|
||||
## [Mermaid v11 is out!](https://www.mermaidchart.com/blog/posts/mermaid-v11/)
|
||||
|
||||
23 August 2024 · 2 mins
|
||||
|
||||
Mermaid v11 introduces advanced layout options, new diagram types, and enhanced customization features, thanks to the incredible contributions from our community.
|
||||
|
||||
## [Mermaid Innovation - Introducing New Looks for Mermaid Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-innovation-introducing-new-looks-for-mermaid-diagrams/)
|
||||
|
||||
6 August 2024 ·3 mins
|
||||
|
||||
Discover the fresh new and unique Neo and Hand-Drawn looks for Mermaid Diagrams, while still offering the classic look you love.
|
||||
|
||||
## [The Mermaid Chart Plugin for Jira: A How-To User Guide](https://www.mermaidchart.com/blog/posts/the-mermaid-chart-plugin-for-jira-a-how-to-user-guide/)
|
||||
|
||||
31 July 2024 · 5 mins
|
||||
|
||||
The Mermaid Chart plugin for Jira has arrived!
|
||||
|
||||
## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
|
||||
|
||||
22 July 2024 · 5 mins
|
||||
|
||||
The Mermaid AI chat interface
|
||||
|
||||
## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
|
||||
|
||||
8 July 2024 · 6 mins
|
||||
|
||||
Sequence diagrams are important for communicating complex systems in a clear and concise manner.
|
||||
|
||||
## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
|
||||
|
||||
2 July 2024 · 3 mins
|
||||
|
||||
How to Use the New Comments Feature in Mermaid Chart
|
||||
|
||||
## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
|
||||
|
||||
21 May 2024 · 4 mins
|
||||
|
||||
It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
|
||||
|
||||
## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
|
||||
|
||||
7 May 2024 · 5 mins
|
||||
|
||||
@@ -172,7 +172,7 @@ The `title` is an _optional_ string to be displayed at the top of the Gantt char
|
||||
The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
|
||||
These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.
|
||||
|
||||
#### Weekend (v\<MERMAID_RELEASE_VERSION>+)
|
||||
#### Weekend (v\11.0.0+)
|
||||
|
||||
When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
|
||||
To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.
|
||||
|
||||
@@ -918,7 +918,7 @@ Usage example:
|
||||
commit
|
||||
```
|
||||
|
||||
### Bottom to Top (`BT:`) (v\<MERMAID_RELEASE_VERSION>+)
|
||||
### Bottom to Top (`BT:`) (v11.0.0+)
|
||||
|
||||
In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md).
|
||||
|
||||
# Packet Diagram (v\<MERMAID_RELEASE_VERSION>+)
|
||||
# Packet Diagram (v11.0.0+)
|
||||
|
||||
## Introduction
|
||||
|
||||
|
||||
@@ -208,18 +208,18 @@ Messages can be of two displayed either solid or with a dotted line.
|
||||
|
||||
There are ten types of arrows currently supported:
|
||||
|
||||
| Type | Description |
|
||||
| -------- | ------------------------------------------------------------------------ |
|
||||
| `->` | Solid line without arrow |
|
||||
| `-->` | Dotted line without arrow |
|
||||
| `->>` | Solid line with arrowhead |
|
||||
| `-->>` | Dotted line with arrowhead |
|
||||
| `<<->>` | Solid line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+) |
|
||||
| `<<-->>` | Dotted line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+) |
|
||||
| `-x` | Solid line with a cross at the end |
|
||||
| `--x` | Dotted line with a cross at the end. |
|
||||
| `-)` | Solid line with an open arrow at the end (async) |
|
||||
| `--)` | Dotted line with a open arrow at the end (async) |
|
||||
| Type | Description |
|
||||
| -------- | ---------------------------------------------------- |
|
||||
| `->` | Solid line without arrow |
|
||||
| `-->` | Dotted line without arrow |
|
||||
| `->>` | Solid line with arrowhead |
|
||||
| `-->>` | Dotted line with arrowhead |
|
||||
| `<<->>` | Solid line with bidirectional arrowheads (v11.0.0+) |
|
||||
| `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |
|
||||
| `-x` | Solid line with a cross at the end |
|
||||
| `--x` | Dotted line with a cross at the end. |
|
||||
| `-)` | Solid line with an open arrow at the end (async) |
|
||||
| `--)` | Dotted line with a open arrow at the end (async) |
|
||||
|
||||
## Activations
|
||||
|
||||
|
||||
Reference in New Issue
Block a user