GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Lint fixes

Browse Source
This commit is contained in:
Knut Sveidqvist 2022-09-05 15:47:17 +02:00
parent df7b5965c2
commit 47490e9820
6 changed files with 38 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
cypress/downloads/downloads.html
View File

Binary file not shown.

36
docs/Setup.md
View File

@ -64,12 +64,12 @@ Theme , the CSS style sheet
**Notes:**
- Trace: 0
- Debug: 1
- Info: 2
- Warn: 3
- Error: 4
- Fatal: 5 (default)
- Trace: 0
- Debug: 1
- Info: 2
- Warn: 3
- Error: 4
- Fatal: 5 (default)
## securityLevel
@ -1420,7 +1420,7 @@ function _Default value: At default, will mirror Global Config_
### Parameters
- `conf` **MermaidConfig** The base currentConfig to use as siteConfig
- `conf` **MermaidConfig** The base currentConfig to use as siteConfig
Returns **[object][5]** The siteConfig
@ -1473,14 +1473,14 @@ $(function () {
### Parameters
- `id` **[string][6]** The id of the element to be rendered
- `text` **[string][6]** The graph definition
- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void**
- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
element will be removed when rendering is completed.
- `id` **[string][6]** The id of the element to be rendered
- `text` **[string][6]** The graph definition
- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void**
- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
element will be removed when rendering is completed.
Returns **void**
Returns **void**
## getConfig
@ -1507,7 +1507,7 @@ options in-place
### Parameters
- `options` **any** The potential setConfig parameter
- `options` **any** The potential setConfig parameter
## addDirective
@ -1535,15 +1535,15 @@ Pushes in a directive to the configuration
### Parameters
- `config` (optional, default `siteConfig`)
- `config` (optional, default `siteConfig`)
Returns **void**
Returns **void**
## initialize
### Parameters
- `options` **MermaidConfig**
- `options` **MermaidConfig**
##

1
docs/index.html
View File

@ -65,7 +65,6 @@
font-size: 20px !important;
font-weight: 900 !important;
}
</style>
</head>
<body>

21
docs/mindmap.md
View File

@ -1,11 +1,13 @@
# Mindmap
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/mindmap.md)
> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stabel except for the icon integration which is the experimental part.
"A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas." Wikipedia
"A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas." Wikipedia
### An example of a mindmap.
```mermaid
mindmap
root((mindmap))
@ -26,11 +28,13 @@ mindmap
Mermaid
```
## Syntax
The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.
In the following example you can see how there are 3 dufferent levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the prevoius lines defining the nodes B and C.
```
mindmap
Root
@ -52,6 +56,7 @@ Root
In this way we can use a text outline to generate a hierarchical mindmap.
## Different shapes
Mermaids mindmaps can show node using different shapes. When specifying a shape for a node the syntax for the is similar to flowchart nodes, with an id followed by the shape definition and with the text within the shape delimiters. Where possible we try/will try to keep the same shapes as for flowcharts even though they are not all supported from the start.
Mindmap can show the following shapes:
@ -62,30 +67,35 @@ Mindmap can show the following shapes:
mindmap
id[I am a square]
```
### Rounded square
```mermaid-example
mindmap
id(I am a rounded square)
```
### Circle
```mermaid-example
mindmap
id((I am a circle))
```
### Bang
```mermaid-example
mindmap
id))I am a bang((
```
### Cloud
```mermaid-example
mindmap
id)I am a cloud(
```
### Default
```mermaid-example
@ -98,7 +108,8 @@ More shapes will be added, beginning with the shapes available in flowcharts.
# Icons and classes
## icons
As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. *This is not something a diagram author can do but has to be done with the site administrator or the integrator*. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parethesis like in the following example where icons for material design and fontwaresome 4. is displayed. The intention is that this approach should be used for all diagrams supporting icons. **Expermental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parethesis like in the following example where icons for material design and fontwaresome 4. is displayed. The intention is that this approach should be used for all diagrams supporting icons. **Expermental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
```mermaid-example
mindmap
@ -108,9 +119,11 @@ mindmap
B(B)
::icon(mdi mdi-skull-outline)
```
## Classes
Again the syntax for adding classes is similar to flowcharts and you can add classes using a tripple colon following a numver of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text whiet and large increasing the font size:
```mermaid-example
mindmap
Root
@ -119,9 +132,11 @@ mindmap
B(B)
C
```
*These classes needs top be supplied by the site administrator.*
_These classes needs top be supplied by the site administrator._
## Unclear indentation
The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can se how the calculations are performed. Let us start with placing C with a smaller indentation than `B`but larger then `A`.
```

3
src/diagram-api/diagram-orchestration.ts
View File

@ -6,7 +6,6 @@ import mindmapParser from '../diagrams/mindmap/parser/mindmap';
import { mindmapDetector } from '../diagrams/mindmap/mindmapDetector';
import mindmapStyles from '../diagrams/mindmap/styles';
import gitGraphDb from '../diagrams/git/gitGraphAst';
import gitGraphRenderer from '../diagrams/git/gitGraphRenderer';
// @ts-ignore
@ -21,7 +20,7 @@ export const addDiagrams = () => {
{ parser: gitGraphParser, db: gitGraphDb, renderer: gitGraphRenderer, styles: gitGraphStyles },
gitGraphDetector
);
registerDiagram(
registerDiagram(
'mindmap',
{ parser: mindmapParser, db: mindmapDb, renderer: mindmapRenderer, styles: mindmapStyles },
mindmapDetector

2
src/diagram-api/diagramAPI.ts
View File

@ -248,5 +248,5 @@ export const getDiagram = (name: string): DiagramDefinition => {
export const log = _log;
export const getConfig = _getConfig;
export const sanitizeText = (text:string) => _sanitizeText(text, getConfig());
export const sanitizeText = (text: string) => _sanitizeText(text, getConfig());
export const setupGraphViewbox = _setupGraphViewbox;