Skip to content

Commit 897467d

Browse files
knsvknsv
committed
Realse 8.3.0
1 parent b0982f6 commit 897467d

File tree

5 files changed

+136
-86
lines changed

5 files changed

+136
-86
lines changed

‎_sidebar.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
- [Flowchart](flowchart.md)
1212
- [Sequence diagram](sequenceDiagram.md)
1313
- [Gantt](gantt.md)
14-
14+
- [Pie Chart](pie.md)
15+
1516
- Guide
1617

1718
- [Development](development.md)

‎docsify-sidebar.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
- [Flowchart](flowchart.md)
1212
- [Sequence diagram](sequenceDiagram.md)
1313
- [Gantt](gantt.md)
14-
14+
- [Pie Chart (beta)](pie.md)
15+
1516
- Guide
1617

1718
- [Development](development.md)

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
88
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
99
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
10-
<script src="//cdn.jsdelivr.net/npm/mermaid@8.2.6/dist/mermaid.min.js"></script>
10+
<script src="//cdn.jsdelivr.net/npm/mermaid@8.3.0/dist/mermaid.min.js"></script>
1111
<style>
1212
.markdown-section {
1313
max-width: 1200px;

‎mermaidAPI.md‎

Lines changed: 94 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44

55
This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
66

7-
The core of this api is the [**render**](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render) function which, given a graph definition as text, renders the graph/diagram and returns an svg element for the graph.
7+
The core of this api is the [**render**][1] function which, given a graph
8+
definition as text, renders the graph/diagram and returns an svg element for the graph.
89

910
It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different.
1011

@@ -13,50 +14,54 @@ In addition to the render function, a number of behavioral configuration options
1314
## Configuration
1415

1516
These are the default options which can be overridden with the initialization call like so:
16-
17-
*Example 1:*
18-
19-
mermaid.initialize({
20-
flowchart:{
21-
htmlLabels: false
22-
}
23-
});
24-
25-
*Example 2:*
26-
```
27-
<script>
28-
var config = {
29-
startOnLoad:true,
30-
flowchart:{
31-
useMaxWidth:true,
32-
htmlLabels:true,
33-
curve:'cardinal',
34-
},
35-
36-
securityLevel:'loose',
37-
};
38-
mermaid.initialize(config);
39-
</script>
40-
```
17+
**Example 1:**
18+
19+
<pre>
20+
mermaid.initialize({
21+
flowchart:{
22+
htmlLabels: false
23+
}
24+
});
25+
</pre>
26+
27+
**Example 2:**
28+
29+
<pre>
30+
<script>
31+
var config = {
32+
startOnLoad:true,
33+
flowchart:{
34+
useMaxWidth:true,
35+
htmlLabels:true,
36+
curve:'cardinal',
37+
},
38+
39+
securityLevel:'loose',
40+
};
41+
mermaid.initialize(config);
42+
</script>
43+
44+
</pre>
4145
A summary of all options and their defaults is found [here](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#mermaidapi-configuration-defaults). A description of each option follows below.
4246

43-
4447
## theme
4548

4649
theme , the CSS style sheet
4750

4851
**theme** - Choose one of the built-in themes:
49-
- default
50-
- forest
51-
- dark
52-
- neutral
5352

54-
To disable any pre-defined mermaid theme, use "null".
53+
- default
54+
- forest
55+
- dark
56+
- neutral.
57+
To disable any pre-defined mermaid theme, use "null".
5558

5659
**themeCSS** - Use your own CSS. This overrides **theme**.
5760

58-
"theme": "forest",
59-
"themeCSS": ".node rect { fill: red; }"
61+
<pre>
62+
"theme": "forest",
63+
"themeCSS": ".node rect { fill: red; }"
64+
</pre>
6065

6166
## logLevel
6267

@@ -98,10 +103,11 @@ on the edges.
98103

99104
### curve
100105

101-
How mermaid renders curves for flowcharts. Possibel values are
102-
- basis
103-
- linear (**default**)
104-
- cardinal
106+
How mermaid renders curves for flowcharts. Possible values are
107+
108+
- basis
109+
- linear **default**
110+
- cardinal
105111

106112
## sequence
107113

@@ -231,7 +237,6 @@ The number of alternating section styles.
231237
### axisFormat
232238

233239
Datetime format of the axis. This might need adjustment to match your locale and preferences
234-
235240
**Default value '%Y-%m-%d'**.
236241

237242
## render
@@ -260,50 +265,56 @@ mermaidAPI.initialize({
260265
provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
261266
completed.
262267

268+
##
269+
263270
## mermaidAPI configuration defaults
264-
```
271+
272+
<pre>
265273

266274
<script>
267-
var config = {
268-
theme:'default',
269-
logLevel:'fatal',
270-
securityLevel:'strict',
271-
startOnLoad:true,
272-
arrowMarkerAbsolute:false,
273-
274-
flowchart:{
275-
htmlLabels:false,
276-
curve:'linear',
277-
},
278-
sequence:{
279-
diagramMarginX:50,
280-
diagramMarginY:10,
281-
actorMargin:50,
282-
width:150,
283-
height:65,
284-
boxMargin:10,
285-
boxTextMargin:5,
286-
noteMargin:10,
287-
messageMargin:35,
288-
mirrorActors:true,
289-
bottomMarginAdj:1,
290-
useMaxWidth:true,
291-
rightAngles:false,
292-
showSequenceNumbers:false,
293-
},
294-
gantt:{
295-
titleTopMargin:25,
296-
barHeight:20,
297-
barGap:4,
298-
topPadding:50,
299-
leftPadding:75,
300-
gridLineStartPadding:35,
301-
fontSize:11,
302-
fontFamily:'"Open-Sans", "sans-serif"',
303-
numberSectionStyles:4,
304-
axisFormat:'%Y-%m-%d',
305-
}
306-
};
307-
mermaid.initialize(config);
308-
</script>
309-
```
275+
var config = {
276+
theme:'default',
277+
logLevel:'fatal',
278+
securityLevel:'strict',
279+
startOnLoad:true,
280+
arrowMarkerAbsolute:false,
281+
282+
flowchart:{
283+
htmlLabels:true,
284+
curve:'linear',
285+
},
286+
sequence:{
287+
diagramMarginX:50,
288+
diagramMarginY:10,
289+
actorMargin:50,
290+
width:150,
291+
height:65,
292+
boxMargin:10,
293+
boxTextMargin:5,
294+
noteMargin:10,
295+
messageMargin:35,
296+
mirrorActors:true,
297+
bottomMarginAdj:1,
298+
useMaxWidth:true,
299+
rightAngles:false,
300+
showSequenceNumbers:false,
301+
},
302+
gantt:{
303+
titleTopMargin:25,
304+
barHeight:20,
305+
barGap:4,
306+
topPadding:50,
307+
leftPadding:75,
308+
gridLineStartPadding:35,
309+
fontSize:11,
310+
fontFamily:'"Open-Sans", "sans-serif"',
311+
numberSectionStyles:4,
312+
axisFormat:'%Y-%m-%d',
313+
}
314+
};
315+
mermaid.initialize(config);
316+
</script>
317+
318+
</pre>
319+
320+
[1]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render

‎pie.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Pie chart diagrams
2+
3+
> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
4+
5+
Mermaid can render Pie Chart diagrams.
6+
7+
```
8+
pie
9+
"Dogs" : 386
10+
"Cats" : 85
11+
"Rats" : 15
12+
```
13+
```mermaid
14+
pie title Pets adopted by volunteers
15+
"Dogs" : 386
16+
"Cats" : 85
17+
"Rats" : 35
18+
```
19+
20+
21+
## Syntax
22+
23+
```
24+
pie
25+
"DataKey1" : Positive numeric value (upto two decimal places)
26+
"Calcium" : 42.96
27+
"Potassium" : 50.05
28+
"Magnesium" : 10.01
29+
"Iron" : 5
30+
```
31+
```mermaid
32+
pie title Key elements in Product X
33+
"Calcium" : 42.96
34+
"Potassium" : 50.05
35+
"Magnesium" : 25.01
36+
"Iron" : 15
37+
```

0 commit comments

Comments
 (0)