GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1 from NeilCuzon/release/8.6.0

Browse Source 
Release/8.6.0
This commit is contained in:
Neil Cuzon 2020-07-26 21:18:16 -07:00 committed by GitHub
commit 474ab586f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
72 changed files with 317427 additions and 24990 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -16,4 +16,5 @@ dist/sequenceTest.html
.vscode/
cypress/platform/current.html
cypress/platform/experimental.html
cypress/platform/experimental.html
local/

2
cypress/integration/other/webpackUsage.spec.js
View File

@ -6,6 +6,6 @@ describe('Sequencediagram', () => {
cy.visit(url);
cy.get('body')
.find('svg')
.should('have.length', 2);
.should('have.length', 1);
});
});

278
cypress/integration/rendering/theme.spec.js Normal file
View File

@ -0,0 +1,278 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util.js';
describe('Pie Chart', () => {
// beforeEach(()=>{
// cy.clock((new Date('2014-06-09')).getTime());
// });
['default', 'forest', 'dark', 'neutral'].forEach(theme=>{
describe(theme, () => {
it('should render a pie diagram', () => {
imgSnapshotTest(
`
pie title Sports in Sweden
"Bandy" : 40
"Ice-Hockey" : 80
"Football" : 90
`,
{theme}
);
cy.get('svg');
});
it('should render a flowchart diagram', () => {
imgSnapshotTest(
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
`,
{theme}
);
cy.get('svg');
});
it('should render a new flowchart diagram', () => {
imgSnapshotTest(
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[Another]
C ==>|One| D[Laptop]
C x--x|Two| E[iPhone]
C o--o|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
`,
{theme}
);
cy.get('svg');
});
it('should render a sequence diagram', () => {
imgSnapshotTest(
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
sequenceDiagram
autonumber
par Action 1
Alice->>John: Hello John, how are you?
and Action 2
Alice->>Bob: Hello Bob, how are you?
end
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
Note right of John: John is perceptive
John-->>-Alice: I feel great!
loop Every minute
John-->Alice: Great!
end
`,
{theme}
);
cy.get('svg');
});
it('should render a class diagram', () => {
imgSnapshotTest(
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
classDiagram
Animal "*" <|-- "1" Duck
Animal "1" <|-- "10" Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
`,
{theme}
);
cy.get('svg');
});
it('should render a state diagram', () => {
imgSnapshotTest(
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
stateDiagram
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse
note right of SomethingElse : This is the note to the right.
`,
{theme}
);
cy.get('svg');
});
it('should render a state diagram (v2)', () => {
imgSnapshotTest(
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right.
`,
{theme}
);
cy.get('svg');
});
it('should render a er diagram', () => {
imgSnapshotTest(
`
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
`,
{theme}
);
cy.get('svg');
});
it('should render a user journey diagram', () => {
imgSnapshotTest(
`
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me `,
{theme}
);
cy.get('svg');
});
it('should render a gantt diagram', () => {
cy.clock((new Date('2014-01-06')).getTime());
imgSnapshotTest(
`
gantt
dateFormat :YYYY-MM-DD
title :Adding GANTT diagram functionality to mermaid
excludes :excludes the named dates/days from being included in a charted task..
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
`,
{theme}
);
cy.get('svg');
});
});
});
});

40
cypress/platform/bundle-test.js
View File

@ -1,10 +1,36 @@
import mermaid from '../../dist/mermaid.core'
import mermaid from '../../dist/mermaid.core';
const code = `graph LR
Power_Supply --> Transmitter_A
Power_Supply --> Transmitter_B
Transmitter_A --> D
Transmitter_B --> D`;
mermaid.initialize({
theme: 'forest',
gantt: { axisFormatter: [
['%Y-%m-%d', (d) => {
return d.getDay() === 1
}]
] }
})
fontFamily: '"Lucida Console", Monaco, monospace',
startOnLoad: false,
flowchart: {
htmlLabels: true
},
gantt: {
axisFormatter: [
[
'%Y-%m-%d',
d => {
return d.getDay() === 1;
}
]
]
}
});
mermaid.render(
'the-id-of-the-svg',
code,
svg => {
console.log(svg);
const elem = document.querySelector('#graph-to-be');
elem.innerHTML = svg;
}
// ,document.querySelector('#tmp')
);

143
cypress/platform/current.html
View File

@ -17,58 +17,110 @@
.mermaid2 {
display: none;
}
.someClass > * {
/* fill: red !important; */
}
</style>
</head>
<body>
<h1>info below</h1>
<div class="flex">
<div class="flex flex-wrap">
<div class="mermaid2" style="width: 50%; height: 20%;">
flowchart BT
subgraph two
b1
end
subgraph three
c1-->c2
end
c1 --apa apa apa--> b1
two --> c2
%%{init: { 'logLevel': 0, 'theme': 'forest'} }%%
pie title Sports in Sweden
"Bandy" : 40
"Ice-Hockey" : 80
"Football" : 90
</div>
<div class="mermaid" style="width: 50%; height: 200px;">
sequenceDiagram
Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
<div class="mermaid2" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 0, 'theme': 'default'} }%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid" style="width: 50%; height: 200px;">
%%{init: {'config': {'wrap': true }}}%%
sequenceDiagram
participant A as Extremely utterly
A->>Bob: long line of longness which had preivously overflown the actor box as it is much longer than what it should be
Bob-->A: Pasten ! </div>
<div class="mermaid2" style="width: 50%; height: 200px;">
<div class="mermaid2" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
flowchart BT
subgraph a
b1 -- ok --> b2
end
a -- sert --> c
c --> d
b1 --> d
a --asd123 --> d
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
stateDiagram-v2
state A {
B1 --> B2: ok
}
A --> C: sert
C --> D
B1 --> D
A --> D: asd123
</div>
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
<div class="mermaid2" style="background: #3f3f3f; width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid2" style="background: #3f3f3f; width: 50%; height: 20%;">
%%{init: { 'logLevel': 1} }%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
</div>
<script src="./mermaid.js"></script>
<script>
@ -76,17 +128,20 @@ stateDiagram-v2
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
// theme: 'dark',
// theme: 'dark',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'linear', "htmlLabels": false },
flowchart: { useMaxWidth: true },
graph: { curve: 'cardinal', "htmlLabels": false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'linear',
securityLevel: 'loose'
curve: 'cardinal',
securityLevel: 'strict',
});
function callback(){alert('It worked');}
</script>

141
cypress/platform/theme-directives.html Normal file
View File

@ -0,0 +1,141 @@
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
/* background: rgb(221, 208, 208); */
/* background:#333; */
font-family: 'Arial';
}
h1 { color: grey;}
.mermaid2 {
display: none;
}
.someClass > * {
/* fill: red !important; */
}
</style>
</head>
<body>
<h1>info below</h1>
<div class="flex flex-wrap">
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 0, 'theme': 'default'} }%%
graph TD
A[Default] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
graph TD
A[Forest] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
graph TD
A[Neutral] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
graph TD
A[Dark] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
%%{init: { 'logLevel': 1} }%%
graph TD
A[None set] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'dark',
// theme: 'dark',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { useMaxWidth: true },
graph: { curve: 'cardinal', "htmlLabels": false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'cardinal',
securityLevel: 'strict',
});
function callback(){alert('It worked');}
</script>
</body>
</html>

5
cypress/platform/viewer.js
View File

@ -12,7 +12,9 @@ const contentLoaded = function() {
pos = pos + 7;
const graphBase64 = document.location.href.substr(pos);
const graphObj = JSON.parse(Base64.decode(graphBase64));
// const graph = 'hello'
if (graphObj.mermaid && graphObj.mermaid.theme === 'dark') {
document.body.style.background = '#3f3f3f';
}
console.log(graphObj);
if (Array.isArray(graphObj.code)) {
const numCodes = graphObj.code.length;
@ -30,6 +32,7 @@ const contentLoaded = function() {
div.innerHTML = graphObj.code;
document.getElementsByTagName('body')[0].appendChild(div);
}
global.mermaid.initialize(graphObj.mermaid);
global.mermaid.init();
}

27
cypress/platform/webpackUsage.html
View File

@ -1,22 +1,17 @@
<!doctype html>
<html>
<head>
<style>
/* .mermaid {
font-family: "trebuchet ms", verdana, arial;;
} */
/* .mermaid {
font-family: 'arial';
} */
</style>
</head>
<body>
<div class="mermaid">
graph LR
A-->B
</div>
<div class="mermaid">
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
</div>
<div id="graph-to-be"></div>
<script src="./bundle-test.js" charset="utf-8"></script>
</body>

1481
dist/mermaid.core.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.core.js.map vendored
View File

File diff suppressed because one or more lines are too long

28531
dist/mermaid.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.js.map vendored
View File

File diff suppressed because one or more lines are too long

27
dist/mermaid.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

202
docs/8.6.0_docs.md Normal file
View File

@ -0,0 +1,202 @@
# Version 8.6.0 Changes
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/8.6.0_docs.md)
## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
## [CDN](https://unpkg.com/mermaid/)
With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.
`directives` allow for a diagram specific overriding of `config`, as it has been discussed in [Configurations](./Setup.md).
This allows site users to input modifications to `config` alongside diagram definitions, when creating diagrams on a private webpage that supports mermaid.
**A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.**
the `init` directive is the main method of configuration for Site and Current Levels.
The three levels of are Configuration, Global, Site and Current.
| Level of Configuration | Description |
| --- | --- |
| Global Configuration| Default Mermaid Configurations|
| Site Configuration| Configurations made by site owner|
| Current Configuration| Configurations made by Implementors|
# Limits to Modifying Configurations
secure Array
| Parameter | Description |Type | Required | Values|
| --- | --- | --- | --- | --- |
| secure | Array of parameters excluded from init directive| Array | Required | Any parameters|
The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners.
**Notes**: secure arrays work like nesting dolls, with the Global Configurations’ secure array being the default and immutable list of immutable parameters, or the smallest doll, to which site owners may add to, but implementors may not modify it.
# Secure Arrays
Site owners can add to the **secure** array using this command:
mermaidAPI.initialize( { startOnLoad: true, secure: ['parameter1', 'parameter2'] } );
default values for the `secure array` consists of: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']. These default values are immutable.
Implementors can only modify configurations using directives, but cannot change the `secure` array.
# Modifying Configurations and directives:
The Two types of directives: are `init` or `initialize` and `wrap`.
**Notes**: All directives are enclosed in `%%{ }%%.`
Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backward compatible.
# Init
`init`, or `initialize`: the init or initialize directive gives the user the ability to overwrite and change the values for configuration parameters, with respect to the secure array that is in effect.
| Parameter | Description |Type | Required | Values|
| --- | --- | --- | --- | --- |
| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
**Notes:**
init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
**for example**:
`%%{init: {"theme": default, "logLevel": 1 }}%%`
Configurations that are passed through init cannot change the parameters in secure arrays of higher levels. In the event of a conflict, mermaid will give priority to secure arrays and parse the request, without changing the values of the parameters in conflict.
When deployed within code, init is called before the graph/diagram description.
**for example**:
```
%%{init: {"theme": "default", "logLevel": 1 }}%%
graph LR
a-->b
b-->c
c-->d
d-->e
e-->f
f-->g
g-->
```
# Wrap
| Parameter | Description |Type | Required | Values|
| --- | --- | --- | --- | --- |
| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
**Notes:**
Wrap is a function that is currently only deployable for sequence diagrams.
wrap respects manually added <br\> so if the user wants to break up their text, they have full control over those breaks by adding their own <br\> tags.
It is a non-argument directive and can be executed thusly:
`%%{wrap}%%` .
**an example of text wrapping in a sequence diagram**:
![Image showing wrapped text](./img/wrapped%20text.png)
# Resetting Configurations:
There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**.
**reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes to the last mermaidAPI.initialize({...}) configuration.
**globalReset** will reset both the current configuration AND the site configuration back to the global defaults.
**Notes**: both reset and globalReset are only available to site owners, as such implementors would have to edit their configs with init.
# Additional Utils to mermaid
• **memoize**: simple caching for computationally expensive functions. It reduces the rendering time for computationally intensive diagrams by about 90%.
• **assignWithDepth** - this is an improvement on previous functions with config.js and Object.assign. The purpose of this function is to provide a sane mechanism for merging objects, similar to object.assign, but with depth.
Example of **assignWithDepth**:
![Image showing assignWithDepth](./img/assignWithDepth.png)
Example of **object.Assign**:
![Image showing object.assign without depth](./img/object.assign%20without%20depth.png)
• **calculateTextDimensions, calculateTextWidth,** and **calculateTextHeight** - for measuring text dimensions, width and height.
**Notes**:For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package.
# New API Requests Introduced in Version 8.6.0
## setSiteConfig
| Function | Description | Type | Values |Parameters|Returns|
| --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ |
| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|conf|siteConfig|
**Notes:
Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
to the defaultConfig
Note: currentConfig is set in this function
Default value: At default, will mirror Global Config**
## getSiteConfig
| Function | Description | Type | Values |
| --------- | ------------------- | ------- | ------------------ |
| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig|
**Notes :
Returns any values in siteConfig.**
## setConfig
| Function | Description | Type | Values |Parameters|Returns|
| --------- | ------------------- | ------- | ------------------ |----------|-------|
| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, those in secure array|conf|currentConfig merged with the sanitized conf|
**Notes :
Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
values found in conf with key found in siteConfig.secure will be replaced with the corresponding
siteConfig value.**
## getConfig
| Function | Description | Type | Return Values |
| --------- | ------------------- | ------- | ------------------ |
| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
**Notes :
Returns any values in currentConfig.**
## sanitize
| Function | Description | Type | Values |
| --------- | ------------------- | ------- | ------------------ |
| sanitize |Sets the siteConfig to desired values. | Put Request(?) |None|
**Note: modifies options in-place
Ensures options parameter does not attempt to override siteConfig secure keys.**
## reset
| Function | Description | Type | Required | Values |Parameter|
| --------- | -------------------| ------- | -------- | ------------------ |---------|
| reset|Resets currentConfig to conf| Put Request | Required | None| conf|
## conf
| Parameter | Description |Type | Required | Values|
| --- | --- | --- | --- | --- |
| conf| base set of values, which currentConfig coul be reset to.| Dictionary | Required | Any Values, with respect to the secure Array|
**Notes :
default: current siteConfig (optional, default `getSiteConfig()`)**
## For more information, read [Setup](https://mermaid-js.github.io/mermaid/#/Setup).

4
docs/CHANGELOG.md
View File

@ -1,5 +1,7 @@
# Change Log
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/CHANGELOG.md)
## [Unreleased](https://github.com/knsv/mermaid/tree/HEAD)
[Full Changelog](https://github.com/knsv/mermaid/compare/8.1.0...HEAD)
@ -856,4 +858,4 @@
## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16)
\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*

116
docs/README.md
View File

@ -5,17 +5,41 @@
[![Join the chat at https://gitter.im/knsv/mermaid](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/knsv/mermaid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
![banner](./img/header.png)
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md)
Generation of diagrams and flowcharts from text in a similar manner as markdown.
Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
Check out the list of [Integrations and Usages of Mermaid](./integrations.md)
**Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.**
Mermaid is a tool that generates diagrams and charts, from markdown-inspired text definitions
This allows for simplified generation and updating of even the most complex diagrams and charts, while avoiding time-damanding and heavy tools like visio.
mermaid, is a simple markdown-inspired script language for generating charts from text-definitions, via javascript. As such, using it cuts the times it takes to create, modify and render diagrams.
Even non-programmers can create diagrams through the [mermaid live editor](https://github.com/mermaidjs/mermaid-live-editor).
For a more detailed introduction to mermaid, look to the [Beginner's Guide](https://mermaid-js.github.io/mermaid/#/n00b-overview) section.
You should also Check out the list of [Integrations and Usages of Mermaid](./integrations.md)
You can also watch some popular mermaid tutorials on the [mermaid Overview](./n00b-overview.md)
## [CDN](https://unpkg.com/mermaid/)
## [Documentation](https://mermaidjs.github.io)
## [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
# New in Version 8.6.0
## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
## [New Configuration Protocols in version 8.6.0](https://github.com/NeilCuzon/mermaid/edit/develop/docs/8.6.0_docs.md)
## New diagrams in 8.5
With version 8.5 there are some bug fixes and enhancements, plus a new diagram type, entity relationship diagrams.
@ -24,10 +48,19 @@ With version 8.5 there are some bug fixes and enhancements, plus a new diagram t
## Special note regarding version 8.2
In version 8.2 a security improvement was introduced. A securityLevel configuration was introduced which sets the level of trust to be used on the parsed diagrams.
In version 8.2 a security improvement was introduced. A **securityLevel** configuration was introduced which sets the level of trust to be used on the parsed diagrams.
## securityLevel
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------- |
| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose |
\*\*Notes:
- **strict**: (**default**) tags in text are encoded, click functionality is disabeled
- **loose**: tags in text are allowed, click functionality is enabled
- **true**: (default) tags in text are encoded, click functionality is disabled
- false: tags in text are allowed, click functionality is enabled
Closed issues:
@ -43,9 +76,9 @@ mermaidAPI.initialize({
**🖖 Keep a steady pulse: mermaid needs more Collaborators [#866](https://github.com/knsv/mermaid/issues/866)**
## Diagrams
# Diagrams that mermaid can render:
### Flowchart
### [Flowchart](https://mermaid-js.github.io/mermaid/#/flowchart)
```
graph TD;
@ -57,7 +90,7 @@ graph TD;
![Flowchart](./img/flow.png)
### Sequence diagram
### [Sequence diagram](https://mermaid-js.github.io/mermaid/#/sequenceDiagram)
```
sequenceDiagram
@ -75,7 +108,7 @@ sequenceDiagram
![Sequence diagram](./img/sequence.png)
### Gantt diagram
### [Gantt diagram](https://mermaid-js.github.io/mermaid/#/gantt)
```
gantt
@ -92,7 +125,7 @@ Future task2 : des4, after des3, 5d
![Gantt diagram](./img/gantt.png)
### Class diagram - :exclamation: experimental
### [Class diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/#/classDiagram)
```
classDiagram
@ -134,10 +167,9 @@ commit
merge newbranch
```
![Git graph](./img/git.png)
### Entity Relationship Diagram - :exclamation: experimental
### [Entity Relationship Diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram)
```
erDiagram
@ -149,6 +181,21 @@ erDiagram
![ER diagram](./img/simple-er.png)
### [User Journey Diagram](https://mermaid-js.github.io/mermaid/#/user-journey)
```markdown
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
![Journey diagram](./img/user-journey.png)
## Installation
### CDN
@ -157,24 +204,43 @@ erDiagram
https://unpkg.com/mermaid@<version>/dist/
```
Replace `<version>` with expected version number.
To select a version:
Example: https://unpkg.com/mermaid@7.1.0/dist/
Replace `<version>` with the desired version number.
### Node.js
Alternatively, you can also adjust the version number in the page itself.
Latest Version: https://unpkg.com/browse/mermaid@8.6.0/
## Incorporating mermaid to a website
to support mermaid on your website, all you have to do is add Mermaid’s JavaScript package
```
yarn add mermaid
1.You will need to isntall node v10 or 12, which would have npm
2. download yarn using npm.
2. enter the following command:
yarn add mermaid
3. You can then add mermaid as a dev dependency using this command:
yarn add --dev mermaid
```
## Documentation
## To install mermaid without a bundler, one can use the script tag like so:
https://mermaidjs.github.io
<script src="https://unpkg.com/mermaid/"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
## it can then be followed by the diagram definitions as could be found in the [examples in the documentation](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
## On your page mermaid will look for tags with class="mermaid". From these tags mermaid will try to read the chart definiton and replace it with an svg chart.
## Sibling projects
- [mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
- [mermaid live editor](https://github.com/mermaidjs/mermaid-live-editor)
- [mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
- [mermaid webpack demo](https://github.com/mermaidjs/mermaid-webpack-demo)
- [mermaid Parcel demo](https://github.com/mermaidjs/mermaid-parcel-demo)

114
docs/Setup.md
View File

@ -13,6 +13,10 @@ In addition to the render function, a number of behavioral configuration options
## Configuration
**Configuration methods in Mermaid version 8.6.0 have been updated to include `directives`, to learn more\[[click here][2]].**
## **What follows are config instructions for older versions**
These are the default options which can be overridden with the initialization call like so:
**Example 1:**
@ -42,16 +46,43 @@ mermaid.initialize({
&lt;/script>
</pre>
A summary of all options and their defaults is found [here][2]. A description of each option follows below.
A summary of all options and their defaults is found [here][3]. A description of each option follows below.
| Parameter | Description | Type | Required | Values |
| ---------- | ------------------------------------------------------ | ------ | -------- | ----------------------------- |
| config | current mermaid configurations | Object | Required | All parameters and values, except where prohibited by `secure`. |
**Notes:**
**config here is an object that can be created either through `const` or `var` and is loaded by `mermaidAPI.initialize`.
config, can be overriden using the `%%init%%` directive, after [Version 8.6.0](./8.6.0_docs.md) was introduced.
## secure
This option controls which currentConfig keys are considered _secure_ and can only be changed via
call to mermaidAPI.initialize. Calls to `mermaidAPI.reinitialize` cannot make changes to
the `secure` keys in the current currentConfig. This prevents malicious graph directives from
overriding a site's default security.
| Parameter | Description |Type | Required | Values|
| --- | --- | --- | --- | --- |
| secure | Array of parameters that cannot be changed the `init` directive| Array | Required | Any parameters|
The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners.
**Notes**: `secure` arrays work like nesting dolls, with the Global Configurations’ secure array being the default and immutable list of immutable parameters, or the smallest doll, to which site owners may add to, but implementors may not modify it.
## theme
theme , the CSS style sheet
theme , the CSS style sheet
| Parameter | Description |Type | Required | Values|
\| --- \| --- \| --- \| --- \| --- \|
| Theme |Built in Themes| String | Optional | Values include, default, forest, dark, neutral, null|
| Parameter | Description | Type | Required | Values |
| --------- | --------------- | ------ | -------- | ---------------------------------------------------- |
| Theme | Built in Themes | String | Optional | Values include, default, forest, dark, neutral, null |
**Notes:**To disable any pre-defined mermaid theme, use "null".
<pre>
@ -83,14 +114,15 @@ theme , the CSS style sheet
## securityLevel
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------- |
| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose |
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
\*\*Notes:
- **strict**: (**default**) tags in text are encoded, click functionality is disabeled
- **loose**: tags in text are allowed, click functionality is enabled
- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
## startOnLoad
@ -111,13 +143,6 @@ theme , the CSS style sheet
**Default value: false**.
## secure
This option controls which currentConfig keys are considered _secure_ and can only be changed via
call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to
the `secure` keys in the current currentConfig. This prevents malicious graph directives from
overriding a site's default security.
## flowchart
The object containing configurations specific for flowcharts
@ -821,11 +846,20 @@ mermaidAPI.initialize({
## setSiteConfig
## setSiteConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
**Notes:**
Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
to the defaultConfig
Note: currentConfig is set in this function
\*Default value: At default, will mirror Global Config\*\*
### Parameters
- `conf` the base currentConfig to use as siteConfig
@ -834,13 +868,27 @@ Returns **any** the siteConfig
## getSiteConfig
Obtains the current siteConfig base configuration
## getSiteConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------------------- | ----------- | --------------------------------- |
| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |
**Notes**:
Returns **any** values in siteConfig.
Returns **any**
## setConfig
Sets the currentConfig. The param conf is sanitized based on the siteConfig.secure keys. Any
## setConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
**Notes**:
Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
values found in conf with key found in siteConfig.secure will be replaced with the corresponding
siteConfig value.
@ -852,12 +900,25 @@ Returns **any** the currentConfig merged with the sanitized conf
## getConfig
Obtains the currentConfig
## getConfig
| Function | Description | Type | Return Values |
| --------- | ------------------------- | ----------- | ----------------------------- |
| getConfig | Obtains the currentConfig | Get Request | Any Values from currentConfig |
**Notes**:
Returns **any** the currentConfig
Returns **any** the currentConfig
## sanitize
## sanitize
| Function | Description | Type | Values |
| -------- | -------------------------------------- | ----------- | ------ |
| sanitize | Sets the siteConfig to desired values. | Put Request | None |
Ensures options parameter does not attempt to override siteConfig secure keys
Note: modifies options in-place
@ -867,12 +928,25 @@ Note: modifies options in-place
## reset
Resets this currentConfig to conf
## reset
| Function | Description | Type | Required | Values |
| -------- | ---------------------------- | ----------- | -------- | ------ |
| reset | Resets currentConfig to conf | Put Request | Required | None |
| Parameter | Description | Type | Required | Values |
| --------- | ------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
| conf | base set of values, which currentConfig coul be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
\*Notes :
(default: current siteConfig ) (optional, default `getSiteConfig()`)
### Parameters
- `conf` the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)
[1]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render
[1]: Setup.md?id=render
[2]: https://github.com/knsv/mermaid/blob/master/docs/Setup.md#mermaidapi-configuration-defaults
[2]: 8.6.0_docs.md
[3]: #mermaidapi-configuration-defaults

5
docs/_sidebar.md
View File

@ -3,6 +3,7 @@
- [mermaid](README.md)
- [FAQ](faq.md)
- [Usage](usage.md)
- [Integrations](integrations.md)
- [Examples](examples.md)
- [mermaid CLI](mermaidCLI.md)
@ -21,10 +22,10 @@
- Guide
- [Development](development.md)
- [Setup](Setup.md)
- [Configurations](Setup.md)
- [Changelog](CHANGELOG.md)
- I'm a n00b
- Beginner's Guide
- [overview](n00b-overview.md)
- [Getting started - easier](n00b-gettingStarted.md)
- [Diagram syntax intro](n00b-syntaxReference.md)

2
docs/breakingChanges.md
View File

@ -1,5 +1,5 @@
# Breaking changes
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/breakingChanges.md)
### Breaking changes from history version to latest version:
## #1

1
docs/classDiagram.md
View File

@ -1,4 +1,5 @@
# Class diagrams
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/classDiagram.md)
> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
Wikipedia

2
docs/development.md
View File

@ -1,6 +1,6 @@
# Development
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md)
## Updating the documentation
Please continue writing documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).

36
docs/directives.md
View File

@ -1,11 +1,28 @@
## Directives
**Edit this Page** [![N|Solid](/img/GitHub-Mark-32px.png)](./directives.md)
Directives were added in [Version 8.6.0](/8.6.0_docs.md)
#### Init directives
With this version, directives are supported. Technically there are two flavors of directive: init/initialize and everything else. The init/initialize directive is parsed early in the flow enough to be able to re-initialize mermaid with a new configuration object. Example:
## Directives were added in [Version 8.6.0](/8.6.0_docs.md). Please Read it for more information.
## Directives
With this version, directives are supported. Directives are divided in two sets, by priority. the first set, containing 'init' or 'initialize' directives take priority. While the other set, containing all other kinds of directives are considered only after 'init' and the graph-type declared.
#### Init
| Parameter | Description |Type | Required | Values|
| --- | --- | --- | --- | --- |
| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
**Notes:**
init would be an argument-directive: %%{init: { **insert argument here**}}%%
The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
The init/initialize directive is parsed early in the flow, enough to be able to re-initialize mermaid with a new configuration object. Example:
```
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
graph >
@ -14,7 +31,7 @@ A-->B
will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart diagram.
Note: init or initialize are both acceptable as init directives. Also note that init directives are coalesced. This means:
Note: 'init' or 'initialize' are both acceptable as init directives. Also note that init directives are coalesced. This means:
```
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
@ -33,10 +50,11 @@ will result an init object looking like this:
```
to be sent to `mermaid.initialize(...)`
#### Other directives
The other flavor of directive is everything else. In this category are any directives that follow the graph type declaration. Essentially, these directives will not be processed early in the flow like the init directive. Each individual graph type will handle these directives. As an example:
In this category are any directives that follow the graph type declaration. Essentially, these directives will not be processed early in the flow like the init directive. Each individual graph type will handle these directives. As an example:
```
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
@ -45,15 +63,19 @@ sequenceDiagram
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
```
## Chronology
This will set the `logLevel` to `debug` and `theme` to `dark` for a sequence diagram. Then, during processing, the config for the sequence diagram is set by the `config` directive. This directive is handled in the `sequenceDb.js`. In this example, the fontFamily, fontSize, and fontWeight are all set for this sequence diagram.
#### Backwards Compatibility
Init directives and any other non-multiline directives should be backwards compatible because they will be treated as comments in prior versions of mermaid-js.
Init directives and any other non-multiline directives should be backwards compatible, because they will be treated as comments in prior versions of mermaid-js.
Multiline directives, however, will pose an issue and will render an error. This is unavoidable.
### Wrapping
The `%%{wrap}%%` directive and the inline `wrap:` text hint have also been added for sequence diagrams. This has been explained in my previous comments and has not materially changed.
# Wrap
| Parameter | Description |Type | Required | Values|
| --- | --- | --- | --- | --- |
| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|

10
docs/examples.md
View File

@ -1,3 +1,13 @@
# Examples
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/examples.md)
This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
## If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
## If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) section.
## Basic Pie Chart
```

4
docs/faq.md
View File

@ -1,3 +1,7 @@
Frequently Asked Questions:
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/faq.md)
1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
1. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)

1
docs/flowchart.md
View File

@ -1,5 +1,6 @@
# Flowcharts - Basic Syntax
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./flowchart.md)
## Graph
This statement declares the direction of the Flowchart.

2
docs/gantt.md
View File

@ -1,5 +1,7 @@
# Gantt diagrams
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./gantt.md)
> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
## A note to users

BIN
docs/img/GitHub-Mark-32px.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
docs/img/assignWithDepth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
docs/img/object.assign without depth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/img/user-journey.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
docs/img/without wrap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

BIN
docs/img/wrapped text.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

1
docs/integrations.md
View File

@ -1,4 +1,5 @@
# Integrations
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-gettingStarted.md)
The following is a list of different integrations and plugins where mermaid is being used

146
docs/n00b-gettingStarted.md
View File

@ -1,19 +1,23 @@
# A basic mermaid User-Guide for Beginners
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-gettingStarted.md)
Creating diagrams and charts, using mermaid code is simple.
Creating diagrams and charts using mermaid code is simple.
The code is turned into a diagram in the web page with the use of a mermaid renderer.
But how is the code turned into a diagram in a web page? This is done with the use of a mermaid renderer.
The mermaid renderer is a piece of javascript that parses mermaid definitions, when called.
This then renders a diagram based on that code in SVG, alternatively it
Thankfully the mermaid renderer is very accessible, in essence it is a piece of javascript that can be called.
Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot.
Most widely used web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot. The web browser also needs access to the online mermaid renderer which it downloads from https://cdn.jsdelivr.net/npm/mermaid
## For beginners, there are four relatively easy ways you can use mermaid:
1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). For some popular video tutorials on the live editor go to [Overview](./n00b-overview.md).
2. Using one of the many [mermaid plugins](https://mermaid-js.github.io/mermaid/#/integrations).
3. Hosting mermaid on a webpage, with an absolute link.
4. Downloading mermaid and hosting it on your Web Page.
# For beginners, there are three relatively easy ways you can use mermaid:
1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/)
2. Using a mermaid plugin, such as that for Confluence or [Atom](https://atom.io/packages/atom-mermaid).
3. Calling mermaid renderer with HTML, deployed in a friendly browser.
# Following either of these examples, you can get started with creating your own diagrams using mermaid code.
**Notes**: More in depth information can be found on [Usage](./usage.md).
.
# Following any of these examples, you can get started with creating your own diagrams using mermaid code.
## 1. The mermaid live editor:
@ -21,26 +25,29 @@ Most widely used web browsers, such as Firefox, Chrome and Safari, can render me
In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
**This is a great way to learn how to define a mermaid diagram.**
For some popular video tutorials on the live editor go to [Overview](./n00b-overview.md).
![Flowchart](./img/n00b-liveEditor.png)
**Notes:**
You can also copy the code from the code section and paste it into either a mermaid plugin or in inside an html file, which will be taught in numbers 2 and 3.
It is also an easier way to develop diagrams. You can also click "Copy Markdown" to copy the markdown code for the diagram, that can then be pasted directly into your documentation.
You can also click "Copy Markdown" to copy the markdown code for the diagram, that can then be pasted directly into your documentation.
![Flowchart](./img/liveEditorOptions.png)
The `Mermaid configuration` is for controlling mermaid behaviour. An easy introduction to mermaid configuration is found in the [Advanced usage](n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](mermaidAPI.md) page.
The `Mermaid configuration` is for controlling mermaid behaviour. An easy introduction to mermaid configuration is found in the [Advanced usage](n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](https://mermaid-js.github.io/mermaid/#/Setup) page.
## 2. Using mermaid plugins:
Thanks to the growing popularity of mermaid, many plugins already exist which incorporate a mermaid renderer. An extensive list can be found [here](integrations.md).
Thanks to the growing popularity of mermaid, many plugins already exist which incorporate a mermaid renderer. An extensive list can be found [here](./integrations.md).
One example in the list is the [Atlassian Confluence mermaid plugin](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
When the mermaid plugin is installed on a Confluence server, one can insert a mermaid object into any Confluence page.
# Here is a step by step process for using the mermaid-Confluence plugin:
### Here is a step by step process for using the mermaid-Confluence plugin:
---
@ -67,17 +74,18 @@ When the mermaid plugin is installed on a Confluence server, one can insert a me
![Flowchart](./img/n00b-Confluence4.png)
---
## The following are two ways of hosting mermaid on a webpage.
**This is covered in greater detail in the [Usage section](https://mermaid-js.github.io/mermaid/#/usage)**
## 3. mermaid using any web server (or just a browser):
## 3. Using the Mermaid API: The quick and dirty way of deploying mermaid
This method can be used with any common web server. Apache, IIS, nginx, node express [...], you pick your favourite.
We do not need to install anything on the server, apart from a program (like Notepad++) that can generate an html file, which is then deployed by a web browser (such as Firefox, Chrome, Safari, but not Internet Explorer).
So if you want to really simplify things when testing this out, don't use a web server at all but just create the file locally and drag it into your browser window. It is the browser which does all the work of rendering mermaid!
So if you want to really simplify things when testing this out, don't use a web server at all but just create an HTML file locally and drag it into your browser window. The browser will do the work of rendering the mermaid diagrams according to the descriptions you've given!
# Here are instructions for creating an html file with mermaid code:
# Note that all this is written in the html `<body>` section of the web page.
### Note that all this is written in the html `<body>` section of the web page.
When writing the html file, we give the web browser three instructions inside the html code:
@ -85,23 +93,22 @@ a. A reference for fetching the online mermaid renderer, which is written in Jav
b. The mermaid code for the diagram we want to create.
c. The `mermaid.initialize()` command to start the rendering process.
c. The `mermaid.initialize()` API call to start the rendering process.
## This is what needs to go into the html file (and all of them are important), for the mermaidAPI to render the diagrams:
This is what needs to go into the html file:
# a. The reference to the mermaid renderer has to be contained in a `<script src>` tag like so:
### a. A reference to the address of the `mermaid.js` or the `mermaid.min.js` file has to be contained in a `<script src>` tag like so:
```
<body>
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.4.0/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</body>
```
# b. The embedded mermaid code is similarly placed inside a `<div>` tag:
### b. The embedded mermaid diagram definition needs to be contains inside a `<div>` tag that signifies that it is a mermaid diagram:
```
<body>
@ -114,22 +121,27 @@ This is what needs to go into the html file:
</div>
</body>
```
(take note that every mermaid chart/graph/diagram, has to have separate `<div>` tags.)
**Notes**: every mermaid chart/graph/diagram definition, has to have separate `<div>` tags.
# c. When initializing mermaid using `mermaid.initialize()`, mermaid takes all the `<div class="mermaid">` tags it can find in the html body and starts to render them one by one. This is done like so:
### c. The `mermaid.initialize()` API call
`mermaid.initialize()` calls take all the definitions contained in `<div class="mermaid">` tags it can find in the html body and starts to render them one by one. It is called this way:
```
<body>
<script>mermaid.initialize({startOnLoad:true});</script>
</body>
```
**Notes**: It is good practice to keep the `mermaid.initialize()` API call right next the `mermaid.min.js` `script` tag.
`startOnLoad` is a parameter that can optionally be changed to false, this would then prevent mermaid from immediately rendering upon loading.
### If the three steps mentioned are followed you will end up with something like this:
# *Finally*
# If the three steps mentioned are followed you will end up with something like this:
```
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.4.0/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
Here is one mermaid diagram:
@ -150,16 +162,80 @@ This is what needs to go into the html file:
</body>
</html>
```
# Save this to a html file and fetch it with a browser from the web server (or just drag it into your web browser window) and voila!
**Notes**: This has to be saved in an `HTML` file and opened with a browser.
---
## 4. Calling mermaid from a relative link.
This method is similar to 3, if only a little more involved. The difference may be very subtle even, but it offers its own advantages, mainly in speed.
1. install node v10 or 12, which would have npm
2. download yarn using npm by entering the command below:
npm install -g yarn
3. After yarn installs, enter the following command:
yarn add mermaid
4. After downloading mermaid, you can then open the mermaid file you’ve downloaded and go to the `dist` folder.
5. Find the `mermaid.min.js` file,
a. select the file.
b. press the shift key and right click on it
c. select copy as path from the options.
6. Paste it within the `script` tag as the `src`.
```
<script src="Paste the mermaid.min.js file address here"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
```
7. It should look something like this
```
<script src="C:\Users\myPC\mermaid\dist\mermaid.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
```
8. Add the graph and diagram definitions as you would in number 3.
a. be mindful of the `div` tags.
9. Save, load/edit your HTML file to your liking.
**Note** placing the HTML file on the same folder the `mermaid` file you've downloaded is a good practice and allows you to shorten the address on the `src` section.
**As seen here, in this full example:**
```
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
<div class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</div>
<script src="C:\Users\MyPC\mermaid\dist\mermaid.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
</body>
</html>
```
**Three additional comments from Knut Sveidqvist, creator of mermaid:**
- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowdays we can place it directly in `<body>` as seen above. However, older parts of the documentation frequently reflects the previous way which still works.
- We initialize the mermaid rendering with `mermaid.initialize()` directly in the html code. In principle this could be done through placing `mermaid.initialize()` inside of `mermaid.min.js`. We would then eliminate the need for this explicit line in the html. However, there are use cases where we do want to separate the two steps. Sometimes we want full control over when we start looking for `<div>`tags inside the web page with `mermaid.initialize()`, for example when we think that all `<div>` tags may not have been loaded by the time `mermaid.min.js` runs.
- In the example above, `mermaid.min.js` is called using an absolute path. Even worse, the example includes the mermaid version number which of course will change as time goes by. However, the example makes it easy to understand what is going on - even though it is perhaps doomed in a way we do not want in a production environment. When going from testing mermaid out to getting serious with it, I would suggest one of the following approaches for calling `mermaid.min.js`:
- In the third method, `mermaid.min.js` is called using an absolute path. Even worse, the example includes the mermaid version number which of course will change as time goes by. However, the example makes it easy to understand what is going on - even though it is perhaps doomed in a way we do not want in a production environment. When going from testing mermaid out to getting serious with it, I would suggest one of the following approaches for calling `mermaid.min.js`:
1. If you do not enter a specific version, you automatically get the latest one.
2. If you really need a specific version, hard code it (this is rare but it happens).

65
docs/n00b-overview.md
View File

@ -1,8 +1,27 @@
# Overview for n00bs
# Overview for Beginners
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-overview.md)
mermaid is a tool that aims to make diagrams and flowcharts for documentation, easier.
## There is no explanation like a Good Diagram
with mermaid, diagrams can be created through comments like this in a script:
A picture is worth a thousand words, a good diagram would be worth more. There is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so, for documentation.
mermaid aims to change that.
## Creating and Maintaining Diagrams should not be an expensive and frustrating process.
Anyone who has used Visio, or (God Forbid) Excel to make a Gantt Chart, knows how hard it is to make, edit and maintain good visualizations.
In an environment of constantly changing information , diagrams/charts become obsolete/inaccurate very fast. This hobbles the information transfer and productivity in teams.
# Doc Rot kills Diagrams
The fast setting Doc-Rot in diagrams makes it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts and the people who make them.
mermaid seeks to change that. mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than most traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams.
# The primary objective of mermaid is to help in addressing the problem of Doc Rot.
With mermaid, diagrams can be created through comments like this in a script:
```
graph TD
@ -15,15 +34,41 @@ And they are rendered into this and made part of the documentation:
![Flowchart](./img/n00b-firstFlow.png)
Most of the similar visuals that you might need to create can be scripted in a similar way, with a varitety of different symbols and chart types available.
Since the diagram source is text based, it can be part of production scripts (and other pieces of code). So less time needs be spent on documenting as a separate task.
## Advantages of Using Mermaid
Comparing with Visio and similar applications, mermaid is a really fast way to create good visualizations. This is especially apparent when editing a complex visualisations, a process that usually takes hours in a desktop application, but only takes minutes (or even less if generation has been scripted) with mermaid.
- The Advantages of mermaid include its ease of generation, modification and rendering.
- The number of integrations that it has.
- It is a package that can be deployed to create
mermaid can potentially cut down the amount of time and effort spent on the process of creating diagrams, to a fraction of what you usually put in.
However, a lot of the mermaid documentation is geared to professional frontend developers, presuming a skill set which I simply do not have.
## Diagramming and charting is a gigantic waste of developer time, but not having diagrams ruins productivity.
If you need some basic instructions and introductions, here are a few good places to start:
mermaid can cut down the amount of time, effort and the learning curve that is associated with creating diagrams and charts, by a wide margin.
For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted), or you can try out the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/), alternatively, you could also view the [integrations and uses](https://github.com/mermaid-js/mermaid/blob/develop/docs/integrations.md) for mermaid.
Because, the text base for diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code). So less time needs be spent on documenting, as a separate task.
## mermaid helps Documentation catch up with Development, in quickly changing projects.
Being based on markdown, mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render simple diagrams, at much faster speeds.
In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials in the internet.
## mermaid is for everyone.
For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
You can try out the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/).
Alternatively, you could also view the [integrations and uses](https://mermaid-js.github.io/mermaid/#/./integrations).
# For anyone who may need video tutorials, here is a list of beginner friendly introductions:
https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s
https://www.youtube.com/watch?v=5RQqht3NNSE
https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
https://www.youtube.com/watch?v=9HZzKkAqrX8
https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
https://www.youtube.com/watch?v=9HZzKkAqrX8

32
docs/n00b-syntaxReference.md
View File

@ -1,6 +1,30 @@
## Diagram syntax reference
## Diagram syntax
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-syntaxReference.md)
If you are new to mermaid, read the [Getting Started](n00b-gettingStarted.md) and [Overview](n00b-overview.md) sections, to learn the basics of mermaid.
Video Tutorials can be found at the bottom of the Overview Section.
This section is a list of diagram types supported by mermaid. Below is a list of links to aricles that explain the syntax of the diagrams or charts that 0can be called.
They also detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer.
### The benefits of text based diagramming are its speed and modifiability. mermaid allows for easy maintenance and modification of diagrams. This means your diagrams will always be up to date and closely follow your code and improve your documentation.
## mermaid tag:
These Diagram Definitions can be entered within a \<div class=mermaid> tag.
like so :
```
<div class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
```
## mermaid Live Editor
These definitions can also be entered into the [mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor), to render them immediately.
This would then offer
Having already [gotten started](n00b-gettingStarted.md), existing diagram syntax documentation was easy enough to follow even for a n00b like me..
- [Flowchart](flowchart.md)
- [Sequence diagram](sequenceDiagram.md)
@ -8,4 +32,6 @@ Having already [gotten started](n00b-gettingStarted.md), existing diagram syntax
- [State Diagram](stateDiagram.md)
- [Gantt](gantt.md)
- [Pie Chart](pie.md)
- [Entity Relationship Diagram](entityRelationshipDiagram.md)
- [User Journey Diagram](user-journey.md)
- [Directives](directives.md)

2
docs/pie.md
View File

@ -1,5 +1,7 @@
# Pie chart diagrams
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./pie.md)
> 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
-Wikipedia

2
docs/sequenceDiagram.md
View File

@ -1,5 +1,7 @@
# Sequence diagrams
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./sequenceDiagram.md)
> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
Mermaid can render sequence diagrams.

2
docs/stateDiagram.md
View File

@ -1,5 +1,7 @@
# State diagrams
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./stateDiagram.md)
> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.

133
docs/usage.md
View File

@ -1,12 +1,9 @@
# Usage
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
## Installation
mermaid is a javascript tool that makes use of a markdown based syntax to render customizable diagrams and charts, for greater speed and ease.
### npm package
```
yarn add mermaid
```
mermaid was made to 0help Documentation catch up with Development, in quickly changing projects.
### CDN
@ -14,65 +11,57 @@ https://unpkg.com/mermaid/
Please note that you can switch versions through the dropdown box at the top right.
## Using mermaid
## Simple usage on a web page
For the majority of beginners, using the live editor or suppoting mermaid on a webpage would cover their uses for mermaid.
The easiest way to integrate mermaid on a web page requires two elements:
1. Inclusion of the mermaid framework in the html page using a script tag
2. A graph definition on the web page
## Installing and Hosting mermaid on a webpage
If these things are in place mermaid listens to the page load event and when fired (when the page has loaded) it will
locate the graphs on the page and transform them to svg files.
### Using the npm package
### Include mermaid on your web page:
```
1.You will need to insall node v10 or 12, which would have npm.
```html
<script src="mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
2. download yarn using npm.
3. enter the following command:
yarn add mermaid
4. At this point, you can add mermaid as a dev dependency using this command:
yarn add --dev mermaid
5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions.
as is shown in the example below
```
Further down on your page mermaid will look for tags with `class="mermaid"`. From these tags mermaid will try to
read the chart definiton and replace it with the svg chart.
## Hosting mermaid on a web page.
**Notes**: This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
### Define a chart like this:
The easiest way to integrate mermaid on a web page requires three elements:
```html
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
`<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>`
2. The `mermaidAPI` call, in a separate `script` tag. Example:
`<script>mermaid.initialize({startOnLoad:true});</script>`
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
```
<div class="mermaid">
CHART DEFINITION GOES HERE
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
```
Would end up like this:
**If these things are in place mermaid starts at the page load event and when fired (when the page has loaded) it will
locate the graph definitions inside the `div` tags with `class="mermaid"` on the page and transform them to svg charts or diagrams.**
```html
<div class="mermaid" id="mermaidChart0">
<svg>
Chart ends up here
</svg>
</div>
```
An id attribute is also added to mermaid tags without one.
### To enable click event and tags in nodes
In version 8.2 a security improvement was introduced. A `securityLevel` configuration was introduced which sets the level of trust to be used on the parsed diagrams.
* **true**: (default) tags in text are encoded, click functionality is disabled
* false: tags in text are allowed, click functionality is enabled
⚠️ **Note** : This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
If your application is taking resposibility for the diagram source security you can set the `securityLevel` accordingly. By doing this clicks and tags are again allowed.
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
});
```
### Simple full example:
## Simple full example:
```html
<!DOCTYPE html>
@ -87,12 +76,50 @@ If your application is taking resposibility for the diagram source security you
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
<script src="mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
</body>
</html>
```
## Notes:
An id attribute is also added to mermaid tags without one.
Mermaid can load multiple diagrams, in the same page.
### Try it out, save this code as HTML and load it using any browser.(Please don't use Internet Explorer though.)
## To enable click event and tags in nodes
A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
## securityLevel
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
\*\*Notes:
- **strict**: (**default**) tags in text are encoded, click functionality is disabeled
- **loose**: tags in text are allowed, click functionality is enabled
- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
⚠️ **Note** : This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
If you are taking resposibility for the diagram source security you can set the `securityLevel` to a value of your choosing . By doing this clicks and tags are again allowed.
## To chage `securityLevel` with `mermaidAPI.initialize`:
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
});
```
### Labels out of bounds
If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
@ -120,6 +147,7 @@ If your page has other fonts in its body those might be used instead of the merm
font-family: 'trebuchet ms', verdana, arial;
}
```
# This likely requires a `script.js` file, separate from the `HTML`.
### Calling `mermaid.init`
@ -350,6 +378,7 @@ mermaid_config.startOnLoad = true;
## Using the mermaid.init call
#
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are:

2
docs/user-journey.md
View File

@ -1,5 +1,5 @@
# User Journey Diagram
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/user-journey.md)
> User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)
Mermaid can render user journey diagrams:

49
docs/versionUpdates.md Normal file
View File

@ -0,0 +1,49 @@
# Version News and Updates
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/8.6.0_docs.md)
This file will track the progress and the evolution of mermaid over time.
## Here is the list of the newest versions in Descending Order, beginning from the latest version.
# [Version 8.6.0](./8.6.0_docs.md) introduces New Configuration Protocols and Directives
With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.
directives allow for a diagram specific overriding of config, as it has been discussed in Configurations. This allows site users to input modifications to config alongside diagram definitions, when creating diagrams on a private webpage that supports mermaid.
# Version 8.5.0, introduces New diagrams
**New diagrams in 8.5**
With version 8.5 there are some bug fixes and enhancements, plus a new diagram type, entity relationship diagrams.
![Image showing the new ER diagram type](./img/er.png)
# Version 8.2.0, introduces a security improvement
A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
## securityLevel
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
\*\*Notes:
- **strict**: (**default**) tags in text are encoded, click functionality is disabeled
- **loose**: tags in text are allowed, click functionality is enabled
- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
⚠️ **Note** : This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
If you are taking resposibility for the diagram source security you can set the `securityLevel` to a value of your choosing . By doing this clicks and tags are again allowed.
## To chage `securityLevel` with `mermaidAPI.initialize`:
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
});

12
package.json
View File

@ -29,7 +29,6 @@
"test": "yarn lint && jest src/.*",
"test:watch": "jest --watch src",
"prepublishOnly": "yarn build && yarn test && yarn e2e",
"prepush": "yarn test",
"prepare": "yarn build"
},
"repository": {
@ -50,16 +49,16 @@
},
"dependencies": {
"@braintree/sanitize-url": "^3.1.0",
"crypto-random-string": "^3.0.1",
"d3": "^5.7.0",
"dagre": "^0.8.4",
"dagre-d3": "^0.6.4",
"entity-decode": "^2.0.2",
"graphlib": "^2.1.7",
"he": "^1.2.0",
"khroma": "^1.1.0",
"minify": "^4.1.1",
"moment-mini": "^2.22.1",
"scope-css": "^1.2.1"
"stylis": "^3.5.2"
},
"devDependencies": {
"@babel/core": "^7.2.2",
@ -106,5 +105,10 @@
"sideEffects": [
"**/*.css",
"**/*.scss"
]
],
"husky": {
"hooks": {
"pre-push": "yarn test"
}
}
}

80
src/config.js
View File

@ -1,7 +1,18 @@
import { assignWithDepth } from './utils';
import { logger } from './logger';
// import themeVariables from './theme-default';
// import themeForestVariables from './theme-forest';
// import themeNeutralVariables from './theme-neutral';
const themes = {};
for (const themeName of ['default', 'forest', 'dark', 'neutral', 'base']) {
themes[themeName] = require(`./themes/theme-${themeName}.js`);
}
/**
* **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click here](8.6.0_docs.md)].**
*
* ## **What follows are config instructions for older versions**
* These are the default options which can be overridden with the initialization call like so:
* **Example 1:**
* <pre>
@ -28,7 +39,7 @@ import { logger } from './logger';
* mermaid.initialize(config);
* &lt;/script>
* </pre>
* A summary of all options and their defaults is found [here](https://github.com/knsv/mermaid/blob/master/docs/Setup.md#mermaidapi-configuration-defaults). A description of each option follows below.
* A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). A description of each option follows below.
*
* @name Configuration
*/
@ -36,9 +47,11 @@ const config = {
/** theme , the CSS style sheet
*
* theme , the CSS style sheet
*
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| Theme |Built in Themes| String | Optional | Values include, default, forest, dark, neutral, null|
*
***Notes:**To disable any pre-defined mermaid theme, use "null".
* <pre>
* "theme": "forest",
@ -46,6 +59,7 @@ const config = {
* </pre>
*/
theme: 'default',
themeVariables: themes['default'].getThemeVariables(),
themeCSS: undefined,
/* **maxTextSize** - The maximum allowed size of the users text diamgram */
maxTextSize: 50000,
@ -831,6 +845,8 @@ const config = {
useMaxWidth: true
}
};
// debugger;
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
export const defaultConfig = Object.freeze(config);
@ -839,47 +855,75 @@ const siteConfig = assignWithDepth({}, defaultConfig);
const currentConfig = assignWithDepth({}, defaultConfig);
/**
* Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
* the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
* to the defaultConfig
* Note: currentConfig is set in this function
*## setSiteConfig
*| Function | Description | Type | Values |
*| --------- | ------------------- | ------- | ------------------ |
*| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|
***Notes:**
*Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
*the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
*to the defaultConfig
*Note: currentConfig is set in this function
**Default value: At default, will mirror Global Config**
* @param conf - the base currentConfig to use as siteConfig
* @returns {*} - the siteConfig
*/
export const setSiteConfig = conf => {
assignWithDepth(currentConfig, conf, { clobber: true });
// Set theme variables if user has set the theme option
assignWithDepth(siteConfig, conf);
return getSiteConfig();
};
/**
* Obtains the current siteConfig base configuration
*## getSiteConfig
*| Function | Description | Type | Values |
*| --------- | ------------------- | ------- | ------------------ |
*| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig|
***Notes**:
*Returns **any** values in siteConfig.
* @returns {*}
*/
export const getSiteConfig = () => {
return assignWithDepth({}, siteConfig);
};
/**
* Sets the currentConfig. The param conf is sanitized based on the siteConfig.secure keys. Any
* values found in conf with key found in siteConfig.secure will be replaced with the corresponding
* siteConfig value.
*## setConfig
*| Function | Description | Type | Values |
*| --------- | ------------------- | ------- | ------------------ |
*| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, except ones in secure array|
***Notes**:
*Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
*values found in conf with key found in siteConfig.secure will be replaced with the corresponding
*siteConfig value.
* @param conf - the potential currentConfig
* @returns {*} - the currentConfig merged with the sanitized conf
*/
export const setConfig = conf => {
sanitize(conf);
assignWithDepth(currentConfig, conf);
return getConfig();
};
/**
* Obtains the currentConfig
* ## getConfig
*| Function | Description | Type | Return Values |
*| --------- | ------------------- | ------- | ------------------ |
*| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
***Notes**:
*Returns **any** the currentConfig
* @returns {*} - the currentConfig
*/
export const getConfig = () => {
return assignWithDepth({}, currentConfig);
};
/**
* Ensures options parameter does not attempt to override siteConfig secure keys
* Note: modifies options in-place
*## sanitize
*| Function | Description | Type | Values |
*| --------- | ------------------- | ------- | ------------------ |
*| sanitize |Sets the siteConfig to desired values. | Put Request |None|
*Ensures options parameter does not attempt to override siteConfig secure keys
*Note: modifies options in-place
* @param options - the potential setConfig parameter
*/
export const sanitize = options => {
@ -896,7 +940,17 @@ export const sanitize = options => {
});
};
/**
* Resets this currentConfig to conf
*## reset
*| Function | Description | Type | Required | Values |
*| --------- | ------------------- | ------- | -------- | ------------------ |
*| reset|Resets currentConfig to conf| Put Request | Required | None|
*
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| conf| base set of values, which currentConfig coul be **reset** to.| Dictionary | Required | Any Values, with respect to the secure Array|
*
**Notes :
(default: current siteConfig ) (optional, default `getSiteConfig()`)
* @param conf - the base currentConfig to reset to (default: current siteConfig )
*/
export const reset = (conf = getSiteConfig()) => {

63
src/diagrams/class/styles.js Normal file
View File

@ -0,0 +1,63 @@
const getStyles = options =>
`g.classGroup text {
fill: ${options.nodeBorder};
fill: ${options.classText};
stroke: none;
font-family: ${options.fontFamily};
font-size: 10px;
.title {
font-weight: bolder;
}
}
g.clickable {
cursor: pointer;
}
g.classGroup rect {
fill: ${options.nodeBkg};
stroke: ${options.nodeBorder};
}
g.classGroup line {
stroke: ${options.nodeBorder};
stroke-width: 1;
}
.classLabel .box {
stroke: none;
stroke-width: 0;
fill: ${options.nodeBkg};
opacity: 0.5;
}
.classLabel .label {
fill: ${options.nodeBorder};
font-size: 10px;
}
.relation {
stroke: ${options.lineColor};
stroke-width: 1;
fill: none;
}
.dashed-line{
stroke-dasharray: 3;
}
#compositionStart, #compositionEnd, #dependencyStart, #dependencyEnd, #extensionStart, #extensionEnd {
fill: ${options.lineColor};
stroke: ${options.lineColor};
stroke-width: 1;
}
#aggregationStart, #aggregationEnd {
fill: ${options.nodeBkg};
stroke: ${options.lineColor};
stroke-width: 1;
}
`;
export default getStyles;

22
src/diagrams/er/styles.js Normal file
View File

@ -0,0 +1,22 @@
const getStyles = options =>
`
.entityBox {
fill: ${options.mainBkg};
stroke: ${options.nodeBorder};
}
.relationshipLabelBox {
fill: ${options.edgeLabelBackground};
fillopactity: 0;
background-color: ${options.edgeLabelBackground};
rect {
opacity: 0.5;
}
}
.relationshipLine {
stroke: ${options.lineColor};
}
`;
export default getStyles;

75
src/diagrams/flowchart/styles.js Normal file
View File

@ -0,0 +1,75 @@
const getStyles = options =>
`.label {
font-family: ${options.fontFamily};
color: ${options.textColor};
}
.label text {
fill: ${options.textColor};
}
.node rect,
.node circle,
.node ellipse,
.node polygon,
.node path {
fill: ${options.mainBkg};
stroke: ${options.nodeBorder};
stroke-width: 1px;
}
.node .label {
text-align: center;
}
.node.clickable {
cursor: pointer;
}
.arrowheadPath {
fill: ${options.arrowheadColor};
}
.edgePath .path {
stroke: ${options.lineColor};
stroke-width: 1.5px;
}
.flowchart-link {
stroke: ${options.lineColor};
fill: none;
}
.edgeLabel {
background-color: ${options.edgeLabelBackground};
rect {
opacity: 0.5;
}
text-align: center;
}
.cluster rect {
fill: ${options.secondBkg};
stroke: ${options.clusterBorder};
stroke-width: 1px;
}
.cluster text {
fill: ${options.titleColor};
}
div.mermaidTooltip {
position: absolute;
text-align: center;
max-width: 200px;
padding: 2px;
font-family: ${options.fontFamily};
font-size: 12px;
background: ${options.secondBkg};
border: 1px solid ${options.border2};
border-radius: 2px;
pointer-events: none;
z-index: 100;
}
`;
export default getStyles;

261
src/diagrams/gantt/styles.js Normal file
View File

@ -0,0 +1,261 @@
const getStyles = options =>
`
.mermaid-main-font {
font-family: "trebuchet ms", verdana, arial;
font-family: var(--mermaid-font-family);
}
.section {
stroke: none;
opacity: 0.2;
}
.section0 {
fill: ${options.sectionBkgColor};
}
.section2 {
fill: ${options.sectionBkgColor2};
}
.section1,
.section3 {
fill: ${options.altSectionBkgColor};
opacity: 0.2;
}
.sectionTitle0 {
fill: ${options.titleColor};
}
.sectionTitle1 {
fill: ${options.titleColor};
}
.sectionTitle2 {
fill: ${options.titleColor};
}
.sectionTitle3 {
fill: ${options.titleColor};
}
.sectionTitle {
text-anchor: start;
font-size: 11px;
text-height: 14px;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}
/* Grid and axis */
.grid .tick {
stroke: ${options.gridColor};
opacity: 0.8;
shape-rendering: crispEdges;
text {
font-family: ${options.fontFamily};
fill: ${options.textColor};
}
}
.grid path {
stroke-width: 0;
}
/* Today line */
.today {
fill: none;
stroke: ${options.todayLineColor};
stroke-width: 2px;
}
/* Task styling */
/* Default task */
.task {
stroke-width: 2;
}
.taskText {
text-anchor: middle;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}
.taskText:not([font-size]) {
font-size: 11px;
}
.taskTextOutsideRight {
fill: ${options.taskTextDarkColor};
text-anchor: start;
font-size: 11px;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}
.taskTextOutsideLeft {
fill: ${options.taskTextDarkColor};
text-anchor: end;
font-size: 11px;
}
/* Special case clickable */
.task.clickable {
cursor: pointer;
}
.taskText.clickable {
cursor: pointer;
fill: ${options.taskTextClickableColor} !important;
font-weight: bold;
}
.taskTextOutsideLeft.clickable {
cursor: pointer;
fill: ${options.taskTextClickableColor} !important;
font-weight: bold;
}
.taskTextOutsideRight.clickable {
cursor: pointer;
fill: ${options.taskTextClickableColor} !important;
font-weight: bold;
}
/* Specific task settings for the sections*/
.taskText0,
.taskText1,
.taskText2,
.taskText3 {
fill: ${options.taskTextColor};
}
.task0,
.task1,
.task2,
.task3 {
fill: ${options.taskBkgColor};
stroke: ${options.taskBorderColor};
}
.taskTextOutside0,
.taskTextOutside2
{
fill: ${options.taskTextOutsideColor};
}
.taskTextOutside1,
.taskTextOutside3 {
fill: ${options.taskTextOutsideColor};
}
/* Active task */
.active0,
.active1,
.active2,
.active3 {
fill: ${options.activeTaskBkgColor};
stroke: ${options.activeTaskBorderColor};
}
.activeText0,
.activeText1,
.activeText2,
.activeText3 {
fill: ${options.taskTextDarkColor} !important;
}
/* Completed task */
.done0,
.done1,
.done2,
.done3 {
stroke: ${options.doneTaskBorderColor};
fill: ${options.doneTaskBkgColor};
stroke-width: 2;
}
.doneText0,
.doneText1,
.doneText2,
.doneText3 {
fill: ${options.taskTextDarkColor} !important;
}
/* Tasks on the critical line */
.crit0,
.crit1,
.crit2,
.crit3 {
stroke: ${options.critBorderColor};
fill: ${options.critBkgColor};
stroke-width: 2;
}
.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
stroke: ${options.critBorderColor};
fill: ${options.activeTaskBkgColor};
stroke-width: 2;
}
.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
stroke: ${options.critBorderColor};
fill: ${options.doneTaskBkgColor};
stroke-width: 2;
cursor: pointer;
shape-rendering: crispEdges;
}
.milestone {
transform: rotate(45deg) scale(0.8,0.8);
}
.milestoneText {
font-style: italic;
}
.doneCritText0,
.doneCritText1,
.doneCritText2,
.doneCritText3 {
fill: ${options.taskTextDarkColor} !important;
}
.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
fill: ${options.taskTextDarkColor} !important;
}
.titleText {
text-anchor: middle;
font-size: 18px;
fill: ${options.taskTextDarkColor} ;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}
`;
export default getStyles;

14
src/diagrams/git/gitGraphAst.js
View File

@ -1,5 +1,5 @@
import { logger } from '../../logger';
import { random } from '../../utils';
let commits = {};
let head = null;
let branches = { master: head };
@ -7,18 +7,8 @@ let curBranch = 'master';
let direction = 'LR';
let seq = 0;
function makeid(length) {
var result = '';
var characters = '0123456789abcdef';
var charactersLength = characters.length;
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
function getId() {
return makeid(7);
return random({ length: 7 });
}
function isfastforwardable(currentCommit, otherCommit) {

13
src/diagrams/git/styles.js Normal file
View File

@ -0,0 +1,13 @@
const getStyles = () =>
`
.commit-id,
.commit-msg,
.branch-label {
fill: lightgrey;
color: lightgrey;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}
`;
export default getStyles;

3
src/diagrams/info/styles.js Normal file
View File

@ -0,0 +1,3 @@
const getStyles = () => ``;
export default getStyles;

20
src/diagrams/pie/styles.js Normal file
View File

@ -0,0 +1,20 @@
const getStyles = options =>
`.pieTitleText {
text-anchor: middle;
font-size: 25px;
fill: ${options.taskTextDarkColor};
font-family: ${options.fontFamily};
}
.slice {
font-family: ${options.fontFamily};
fill: ${options.textColor};
// fill: white;
}
.legend text {
fill: ${options.taskTextDarkColor};
font-family: ${options.fontFamily};
font-size: 17px;
}
`;
export default getStyles;

100
src/diagrams/sequence/styles.js Normal file
View File

@ -0,0 +1,100 @@
const getStyles = options =>
`.actor {
stroke: ${options.actorBorder};
fill: ${options.actorBkg};
}
text.actor > tspan {
fill: ${options.actorTextColor};
stroke: none;
}
.actor-line {
stroke: ${options.actorLineColor};
}
.messageLine0 {
stroke-width: 1.5;
stroke-dasharray: none;
stroke: ${options.signalColor};
}
.messageLine1 {
stroke-width: 1.5;
stroke-dasharray: 2, 2;
stroke: ${options.signalColor};
}
#arrowhead path {
fill: ${options.signalColor};
stroke: ${options.signalColor};
}
.sequenceNumber {
fill: ${options.sequenceNumberColor};
}
#sequencenumber {
fill: ${options.signalColor};
}
#crosshead path {
fill: ${options.signalColor};
stroke: ${options.signalColor};
}
.messageText {
fill: ${options.signalTextColor};
stroke: ${options.signalTextColor};
}
.labelBox {
stroke: ${options.labelBoxBorderColor};
fill: ${options.labelBoxBkgColor};
}
.labelText, .labelText > tspan {
fill: ${options.labelTextColor};
stroke: none;
}
.loopText, .loopText > tspan {
fill: ${options.loopTextColor};
stroke: none;
}
.loopLine {
stroke-width: 2px;
stroke-dasharray: 2, 2;
stroke: ${options.labelBoxBorderColor};
fill: ${options.labelBoxBorderColor};
}
.note {
//stroke: #decc93;
stroke: ${options.noteBorderColor};
fill: ${options.noteBkgColor};
}
.noteText, .noteText > tspan {
fill: ${options.noteTextColor};
stroke: none;
}
.activation0 {
fill: ${options.activationBkgColor};
stroke: ${options.activationBorderColor};
}
.activation1 {
fill: ${options.activationBkgColor};
stroke: ${options.activationBorderColor};
}
.activation2 {
fill: ${options.activationBkgColor};
stroke: ${options.activationBorderColor};
}
`;
export default getStyles;

164
src/diagrams/state/styles.js Normal file
View File

@ -0,0 +1,164 @@
const getStyles = options =>
`g.stateGroup text {
fill: ${options.nodeBorder};
stroke: none;
font-size: 10px;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}
g.stateGroup text {
fill: ${options.textColor};
stroke: none;
font-size: 10px;
}
g.stateGroup .state-title {
font-weight: bolder;
fill: ${options.labelColor};
}
g.stateGroup rect {
fill: ${options.nodeBkg};
stroke: ${options.nodeBorder};
}
g.stateGroup line {
stroke: ${options.lineColor};
stroke-width: 1;
}
.transition {
stroke: ${options.lineColor};
stroke-width: 1;
fill: none;
}
.stateGroup .composit {
fill: ${options.background};
border-bottom: 1px
}
.stateGroup .alt-composit {
fill: #e0e0e0;
border-bottom: 1px
}
.state-note {
stroke: ${options.noteBorderColor};
fill: ${options.noteBkgColor};
text {
fill: black;
stroke: none;
font-size: 10px;
}
}
.stateLabel .box {
stroke: none;
stroke-width: 0;
fill: ${options.nodeBkg};
opacity: 0.5;
}
.stateLabel text {
fill: ${options.labelColor};
font-size: 10px;
font-weight: bold;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}
.node circle.state-start {
fill: black;
stroke: black;
}
.node circle.state-end {
fill: black;
stroke: white;
stroke-width: 1.5
}
.node rect {
fill: ${options.mainBkg};
stroke: ${options.nodeBorder};
stroke-width: 1px;
}
#statediagram-barbEnd {
fill: ${options.lineColor};
}
.statediagram-cluster rect {
fill: ${options.nodeBkg};
stroke: ${options.nodeBorder};
stroke-width: 1px;
}
.cluster-label, .nodeLabel {
color: ${options.textColor};
}
.statediagram-cluster rect.outer {
rx: 5px;
ry: 5px;
}
.statediagram-state .divider {
stroke: ${options.nodeBorder};
}
.statediagram-state .title-state {
rx: 5px;
ry: 5px;
}
.statediagram-cluster.statediagram-cluster .inner {
fill: ${options.background};
}
.statediagram-cluster.statediagram-cluster-alt .inner {
fill: #e0e0e0;
}
.statediagram-cluster .inner {
rx:0;
ry:0;
}
.statediagram-state rect.basic {
rx: 5px;
ry: 5px;
}
.statediagram-state rect.divider {
stroke-dasharray: 10,10;
fill: ${options.altBackground ? options.altBackground : '#efefef'};
}
.note-edge {
stroke-dasharray: 5;
}
.statediagram-note rect {
fill: ${options.noteBkgColor};
stroke: ${options.noteBorderColor};
stroke-width: 1px;
rx: 0;
ry: 0;
}
.statediagram-note rect {
fill: ${options.noteBkgColor};
stroke: ${options.noteBorderColor};
stroke-width: 1px;
rx: 0;
ry: 0;
}
.statediagram-note .nodeLabel {
color: ${options.noteTextColor};
}
#dependencyStart, #dependencyEnd {
fill: ${options.lineColor};
stroke: ${options.lineColor};
stroke-width: 1;
}
`;
export default getStyles;

4
src/diagrams/user-journey/journeyRenderer.js
View File

@ -232,12 +232,14 @@ export const drawTasks = function(diagram, tasks, verticalPos) {
let sectionNumber = 0;
let fill = '#CCC';
let colour = 'black';
let num = 0;
// Draw the tasks
for (let i = 0; i < tasks.length; i++) {
let task = tasks[i];
if (lastSection !== task.section) {
fill = fills[sectionNumber % fills.length];
num = sectionNumber % fills.length;
colour = textColours[sectionNumber % textColours.length];
const section = {
@ -245,6 +247,7 @@ export const drawTasks = function(diagram, tasks, verticalPos) {
y: 50,
text: task.section,
fill,
num,
colour
};
@ -269,6 +272,7 @@ export const drawTasks = function(diagram, tasks, verticalPos) {
task.height = conf.diagramMarginY;
task.colour = colour;
task.fill = fill;
task.num = num;
task.actors = taskActors;
// Draw the box with the attached line

121
src/diagrams/user-journey/styles.js Normal file
View File

@ -0,0 +1,121 @@
const getStyles = options =>
`.label {
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
color: ${options.textColor};
}
.mouth {
stroke: #666;
}
line {
stroke: ${options.textColor}
}
.legend {
fill: ${options.textColor};
}
.label text {
fill: #333;
}
.label {
color: ${options.textColor}
}
.face {
fill: #FFF8DC;
stroke: #999;
}
.node rect,
.node circle,
.node ellipse,
.node polygon,
.node path {
fill: ${options.mainBkg};
stroke: ${options.nodeBorder};
stroke-width: 1px;
}
.node .label {
text-align: center;
}
.node.clickable {
cursor: pointer;
}
.arrowheadPath {
fill: ${options.arrowheadColor};
}
.edgePath .path {
stroke: ${options.lineColor};
stroke-width: 1.5px;
}
.flowchart-link {
stroke: ${options.lineColor};
fill: none;
}
.edgeLabel {
background-color: ${options.edgeLabelBackground};
rect {
opacity: 0.5;
}
text-align: center;
}
.cluster rect {
fill: ${options.secondBkg};
stroke: ${options.clusterBorder};
stroke-width: 1px;
}
.cluster text {
fill: ${options.titleColor};
}
div.mermaidTooltip {
position: absolute;
text-align: center;
max-width: 200px;
padding: 2px;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
font-size: 12px;
background: ${options.secondBkg};
border: 1px solid ${options.border2};
border-radius: 2px;
pointer-events: none;
z-index: 100;
}
.task-type-0, .section-type-0 {
${options.fillType0 ? `fill: ${options.fillType0}` : ''};
}
.task-type-1, .section-type-1 {
${options.fillType0 ? `fill: ${options.fillType1}` : ''};
}
.task-type-2, .section-type-2 {
${options.fillType0 ? `fill: ${options.fillType2}` : ''};
}
.task-type-3, .section-type-3 {
${options.fillType0 ? `fill: ${options.fillType3}` : ''};
}
.task-type-4, .section-type-4 {
${options.fillType0 ? `fill: ${options.fillType4}` : ''};
}
.task-type-5, .section-type-5 {
${options.fillType0 ? `fill: ${options.fillType5}` : ''};
}
.task-type-6, .section-type-6 {
${options.fillType0 ? `fill: ${options.fillType6}` : ''};
}
.task-type-7, .section-type-7 {
${options.fillType0 ? `fill: ${options.fillType7}` : ''};
}
`;
export default getStyles;

22
src/diagrams/user-journey/svgDraw.js
View File

@ -24,8 +24,7 @@ export const drawFace = function(element, faceData) {
.append('circle')
.attr('cx', faceData.cx)
.attr('cy', faceData.cy)
.attr('fill', '#FFF8DC')
.attr('stroke', '#999')
.attr('class', 'face')
.attr('r', radius)
.attr('stroke-width', 2)
.attr('overflow', 'visible');
@ -61,6 +60,7 @@ export const drawFace = function(element, faceData) {
//mouth
face
.append('path')
.attr('class', 'mouth')
.attr('d', arc)
.attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 2) + ')');
}
@ -74,6 +74,7 @@ export const drawFace = function(element, faceData) {
//mouth
face
.append('path')
.attr('class', 'mouth')
.attr('d', arc)
.attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 7) + ')');
}
@ -81,12 +82,13 @@ export const drawFace = function(element, faceData) {
function ambivalent(face) {
face
.append('line')
.attr('class', 'mouth')
.attr('stroke', 2)
.attr('x1', faceData.cx - 5)
.attr('y1', faceData.cy + 7)
.attr('x2', faceData.cx + 5)
.attr('y2', faceData.cy + 7)
.attr('class', 'task-line')
.attr('class', 'mouth')
.attr('stroke-width', '1px')
.attr('stroke', '#666');
}
@ -128,7 +130,8 @@ export const drawText = function(elem, textData) {
const textElem = elem.append('text');
textElem.attr('x', textData.x);
textElem.attr('y', textData.y);
textElem.attr('fill', textData.fill);
textElem.attr('class', 'legend');
textElem.style('text-anchor', textData.anchor);
if (typeof textData.class !== 'undefined') {
@ -184,7 +187,7 @@ export const drawSection = function(elem, section, conf) {
rect.fill = section.fill;
rect.width = conf.width;
rect.height = conf.height;
rect.class = 'journey-section';
rect.class = 'journey-section section-type-' + section.num;
rect.rx = 3;
rect.ry = 3;
drawRect(g, rect);
@ -196,7 +199,7 @@ export const drawSection = function(elem, section, conf) {
rect.y,
rect.width,
rect.height,
{ class: 'journey-section' },
{ class: 'journey-section section-type-' + section.num },
conf,
section.colour
);
@ -237,7 +240,7 @@ export const drawTask = function(elem, task, conf) {
rect.fill = task.fill;
rect.width = conf.width;
rect.height = conf.height;
rect.class = 'task';
rect.class = 'task task-type-' + task.num;
rect.rx = 3;
rect.ry = 3;
drawRect(g, rect);
@ -356,7 +359,7 @@ const _drawTextCandidateFunc = (function() {
}
}
function byFo(content, g, x, y, width, height, textAttrs, conf, colour) {
function byFo(content, g, x, y, width, height, textAttrs, conf) {
const body = g.append('switch');
const f = body
.append('foreignObject')
@ -374,10 +377,11 @@ const _drawTextCandidateFunc = (function() {
text
.append('div')
.attr('class', 'label')
.style('display', 'table-cell')
.style('text-align', 'center')
.style('vertical-align', 'middle')
.style('color', colour)
// .style('color', colour)
.text(content);
byTspan(content, body, x, y, width, height, textAttrs, conf);

1
src/mermaid.js
View File

@ -139,6 +139,7 @@ const initialize = function(config) {
}
}
mermaidAPI.initialize(config);
// mermaidAPI.reset();
};
/**

85
src/mermaidAPI.js
View File

@ -1,7 +1,7 @@
/**
* 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.
*
* The core of this api is the [**render**](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render) function which, given a graph
* The core of this api is the [**render**](Setup.md?id=render) function which, given a graph
* definition as text, renders the graph/diagram and returns an svg element for the graph.
*
* 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.
@ -10,8 +10,8 @@
*
* @name mermaidAPI
*/
import Stylis from 'stylis';
import { select } from 'd3';
import scope from 'scope-css';
import pkg from '../package.json';
import { setConfig, getConfig, setSiteConfig, getSiteConfig } from './config';
import { logger, setLogLevel } from './logger';
@ -50,11 +50,11 @@ import journeyParser from './diagrams/user-journey/parser/journey';
import journeyDb from './diagrams/user-journey/journeyDb';
import journeyRenderer from './diagrams/user-journey/journeyRenderer';
import configApi from './config';
import getStyles from './styles';
const themes = {};
for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
themes[themeName] = require(`./themes/${themeName}/index.scss`);
for (const themeName of ['default', 'forest', 'dark', 'neutral', 'base']) {
themes[themeName] = require(`./themes/theme-${themeName}.js`);
}
function parse(text) {
@ -197,16 +197,20 @@ export const decodeEntities = function(text) {
* completed.
*/
const render = function(id, _txt, cb, container) {
const cnf = getConfig();
// Check the maximum allowed text size
let txt = _txt;
if (_txt.length > cnf.maxTextSize) {
txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
}
const graphInit = utils.detectInit(txt);
if (graphInit) {
reinitialize(graphInit);
assignWithDepth(cnf, getConfig());
} else {
configApi.reset();
const siteConfig = getSiteConfig();
updateRendererConfigs(siteConfig);
}
const cnf = getConfig();
// Check the maximum allowed text size
if (_txt.length > cnf.maxTextSize) {
txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
}
if (typeof container !== 'undefined') {
@ -251,51 +255,52 @@ const render = function(id, _txt, cb, container) {
const svg = element.firstChild;
const firstChild = svg.firstChild;
// pre-defined theme
let style = themes[cnf.theme];
if (style === undefined) {
style = '';
}
let userStyles = '';
// user provided theme CSS
if (cnf.themeCSS !== undefined) {
style += `\n${cnf.themeCSS}`;
userStyles += `\n${cnf.themeCSS}`;
}
// user provided theme CSS
if (cnf.fontFamily !== undefined) {
style += `\n:root { --mermaid-font-family: ${cnf.fontFamily}}`;
userStyles += `\n:root { --mermaid-font-family: ${cnf.fontFamily}}`;
}
// user provided theme CSS
if (cnf.altFontFamily !== undefined) {
style += `\n:root { --mermaid-alt-font-family: ${cnf.altFontFamily}}`;
userStyles += `\n:root { --mermaid-alt-font-family: ${cnf.altFontFamily}}`;
}
// classDef
if (graphType === 'flowchart' || graphType === 'flowchart-v2') {
if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
const classes = flowRenderer.getClasses(txt);
for (const className in classes) {
style += `\n.${className} > * { ${classes[className].styles.join(
userStyles += `\n.${className} > * { ${classes[className].styles.join(
' !important; '
)} !important; }`;
if (classes[className].textStyles) {
style += `\n.${className} tspan { ${classes[className].textStyles.join(
userStyles += `\n.${className} tspan { ${classes[className].textStyles.join(
' !important; '
)} !important; }`;
}
}
}
const stylis = new Stylis();
const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));
const style1 = document.createElement('style');
style1.innerHTML = scope(style, `#${id}`);
style1.innerHTML = rules;
svg.insertBefore(style1, firstChild);
const style2 = document.createElement('style');
const cs = window.getComputedStyle(svg);
style2.innerHTML = `#${id} {
color: ${cs.color};
font: ${cs.font};
}`;
svg.insertBefore(style2, firstChild);
// Verify that the generated svgs are ok before removing this
// const style2 = document.createElement('style');
// const cs = window.getComputedStyle(svg);
// style2.innerHTML = `#d${id} * {
// color: ${cs.color};
// // font: ${cs.font};
// // font-family: Arial;
// // font-size: 24px;
// }`;
// svg.insertBefore(style2, firstChild);
try {
switch (graphType) {
@ -518,7 +523,12 @@ function updateRendererConfigs(conf) {
}
function reinitialize(options) {
console.log(`mermaidAPI.reinitialize: v${pkg.version}`, options);
console.warn(`mermaidAPI.reinitialize: v${pkg.version}`, options);
if (options.theme && themes[options.theme]) {
// Todo merge with user options
options.themeVariables = themes[options.theme].getThemeVariables(options.themeVariables);
}
// Set default options
const config = typeof options === 'object' ? setConfig(options) : getSiteConfig();
updateRendererConfigs(config);
@ -527,9 +537,18 @@ function reinitialize(options) {
}
function initialize(options) {
// console.log(`mermaidAPI.initialize: v${pkg.version}`);
console.log(`mermaidAPI.initialize: v${pkg.version} ${options}`);
// Set default options
if (options && options.theme && themes[options.theme]) {
// Todo merge with user options
options.themeVariables = themes[options.theme].getThemeVariables(options.themeVariables);
} else {
if (options) options.themeVariables = themes.default;
}
const config = typeof options === 'object' ? setSiteConfig(options) : getSiteConfig();
updateRendererConfigs(config);
setLogLevel(config.logLevel);
logger.debug('mermaidAPI.initialize: ', config);

83
src/styles.js Normal file
View File

@ -0,0 +1,83 @@
import classDiagram from './diagrams/class/styles';
import er from './diagrams/er/styles';
import flowchart from './diagrams/flowchart/styles';
import gantt from './diagrams/gantt/styles';
import git from './diagrams/git/styles';
import info from './diagrams/info/styles';
import pie from './diagrams/pie/styles';
import sequence from './diagrams/sequence/styles';
import stateDiagram from './diagrams/state/styles';
import journey from './diagrams/user-journey/styles';
const themes = {
flowchart,
'flowchart-v2': flowchart,
sequence,
gantt,
class: classDiagram,
stateDiagram,
state: stateDiagram,
git,
info,
pie,
er,
journey
};
export const calcThemeVariables = (theme, userOverRides) => theme.calcColors(userOverRides);
const getStyles = (type, userStyles, options) => {
return ` {
font-family: ${options.fontFamily};
font-size: ${options.fontSize};
fill: ${options.textColor}
}
/* Classes common for multiple diagrams */
.error-icon {
fill: ${options.errorBkgColor};
}
.error-text {
fill: ${options.errorTextColor};
stroke: ${options.errorTextColor};
}
.edge-thickness-normal {
stroke-width: 2px;
}
.edge-thickness-thick {
stroke-width: 3.5px
}
.edge-pattern-solid {
stroke-dasharray: 0;
}
.edge-pattern-dashed{
stroke-dasharray: 3;
}
.edge-pattern-dotted {
stroke-dasharray: 2;
}
.marker {
fill: ${options.lineColor};
}
.marker.cross {
stroke: ${options.lineColor};
}
svg {
font-family: ${options.fontFamily};
font-size: ${options.fontSize};
}
${themes[type](options)}
${userStyles}
${type} { fill: apa;}
`;
};
export default getStyles;

12
src/themes/mermaid.scss
View File

@ -1,4 +1,4 @@
@import 'flowchart';
// @import 'flowchart';
@import 'sequence';
@import 'gantt';
@import 'class';
@ -13,8 +13,9 @@
:root {
--mermaid-font-family: '"trebuchet ms", verdana, arial';
--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
// --mermaid-alt-font-family: '"Lucida Console", Monaco, monospace';
font-family: '"trebuchet ms", verdana, arial';
font-family: var(--mermaid-font-family);
font-size: 16px;
}
/* Classes common for multiple diagrams */
@ -52,3 +53,8 @@
.marker.cross {
stroke: $lineColor;
}
svg {
font-family: var(--mermaid-font-family);
font-size: 24px;
}

5
src/themes/pie.scss
View File

@ -9,3 +9,8 @@
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}
.legend text {
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
font-size: 17px;
}

2
src/themes/state.scss
View File

@ -82,7 +82,7 @@ g.stateGroup line {
}
.statediagram-cluster rect {
fill: $nodeBkg;
// fill: $nodeBkg;
stroke: $nodeBorder;
stroke-width: 1px;
}

136
src/themes/theme-base.js Normal file
View File

@ -0,0 +1,136 @@
import { darken, lighten, adjust } from 'khroma';
class Theme {
constructor() {
/* Base variables */
this.primaryColor = '#039fbe';
this.secondaryColor = '#b20238';
this.tertiaryColor = lighten('#e8d21d', 30);
this.relationColor = '#000';
this.primaryColor = '#fa255e';
this.secondaryColor = '#c39ea0';
this.tertiaryColor = '#f8e5e5';
this.primaryColor = '#ECECFF';
this.secondaryColor = '#ffffde';
this.tertiaryColor = '#ffffde';
this.background = 'white';
this.lineColor = '#333333';
this.border1 = '#9370DB';
this.arrowheadColor = '#333333';
this.fontFamily = '"trebuchet ms", verdana, arial';
this.fontSize = '16px';
this.labelBackground = '#e8e8e8';
this.textColor = '#333';
this.noteBkgColor = '#fff5ad';
this.noteBorderColor = '#aaaa33';
this.updateColors();
}
updateColors() {
this.secondBkg = this.tertiaryColor;
/* Flowchart variables */
this.nodeBkg = this.primaryColor;
this.mainBkg = this.primaryColor;
this.nodeBorder = darken(this.primaryColor, 23); // border 1
this.clusterBkg = this.tertiaryColor;
this.clusterBorder = darken(this.tertiaryColor, 10);
this.defaultLinkColor = this.lineColor;
this.titleColor = this.textColor;
this.edgeLabelBackground = this.labelBackground;
/* Sequence Diagram variables */
// this.actorBorder = lighten(this.border1, 0.5);
this.actorBorder = lighten(this.border1, 23);
this.actorBkg = this.mainBkg;
this.actorTextColor = 'black';
this.actorLineColor = 'grey';
this.labelBoxBkgColor = this.actorBkg;
this.signalColor = this.textColor;
this.signalTextColor = this.textColor;
this.labelBoxBorderColor = this.actorBorder;
this.labelTextColor = this.actorTextColor;
this.loopTextColor = this.actorTextColor;
this.noteBorderColor = this.border2;
this.noteTextColor = this.actorTextColor;
this.activationBorderColor = darken(this.secondaryColor, 10);
this.activationBkgColor = this.secondaryColor;
this.sequenceNumberColor = 'white';
/* Gantt chart variables */
this.taskTextColor = this.taskTextLightColor;
this.taskTextOutsideColor = this.taskTextDarkColor;
this.sectionBkgColor = this.tertiaryColor;
this.altSectionBkgColor = 'white';
this.sectionBkgColor = this.secondaryColor;
this.sectionBkgColor2 = this.tertiaryColor;
this.altSectionBkgColor = 'white';
this.sectionBkgColor2 = this.primaryColor;
this.taskBorderColor = lighten(this.primaryColor, 23);
this.taskBkgColor = this.primaryColor;
this.taskTextLightColor = 'white';
this.taskTextColor = 'calculated';
this.taskTextDarkColor = 'black';
this.taskTextOutsideColor = 'calculated';
this.taskTextClickableColor = '#003163';
this.activeTaskBorderColor = this.primaryColor;
this.activeTaskBkgColor = lighten(this.primaryColor, 23);
this.gridColor = 'lightgrey';
this.doneTaskBkgColor = 'lightgrey';
this.doneTaskBorderColor = 'grey';
this.critBorderColor = '#ff8888';
this.critBkgColor = 'red';
this.todayLineColor = 'red';
/* state colors */
this.labelColor = 'black';
this.errorBkgColor = '#552222';
this.errorTextColor = '#552222';
/* state colors */
/* class */
this.classText = this.textColor;
/* user-journey */
this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor;
this.fillType2 = adjust(this.primaryColor, { h: 64 });
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
this.fillType4 = adjust(this.primaryColor, { h: -64 });
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
}
calculate(overrides) {
if (typeof overrides !== 'object') {
// Calculate colors form base colors
this.updateColors();
return;
}
const keys = Object.keys(overrides);
// Copy values from overrides, this is mainly for base colors
keys.forEach(k => {
this[k] = overrides[k];
});
// Calculate colors form base colors
this.updateColors();
// Copy values from overrides again in case of an override of derived value
keys.forEach(k => {
this[k] = overrides[k];
});
}
}
export const getThemeVariables = userOverrides => {
const theme = new Theme();
theme.calculate(userOverrides);
return theme;
};

159
src/themes/theme-dark.js Normal file
View File

@ -0,0 +1,159 @@
import { invert, lighten, darken, rgba, adjust } from 'khroma';
class Theme {
constructor() {
this.background = '#333';
this.primaryColor = '#1f2020';
this.secondaryColor = lighten(this.primaryColor, 16);
this.mainBkg = '#1f2020';
this.secondBkg = 'calculated';
this.mainContrastColor = 'lightgrey';
this.darkTextColor = lighten(invert('#323D47'), 10);
this.lineColor = 'calculated';
this.border1 = '#81B1DB';
this.border2 = rgba(255, 255, 255, 0.25);
this.arrowheadColor = 'calculated';
this.fontFamily = '"trebuchet ms", verdana, arial';
this.fontSize = '16px';
this.labelBackground = '#181818';
this.textColor = '#ccc';
/* Flowchart variables */
this.nodeBkg = 'calculated';
this.nodeBorder = 'calculated';
this.clusterBkg = 'calculated';
this.clusterBorder = 'calculated';
this.defaultLinkColor = 'calculated';
this.titleColor = '#F9FFFE';
this.edgeLabelBackground = 'calculated';
/* Sequence Diagram variables */
this.actorBorder = 'calculated';
this.actorBkg = 'calculated';
this.actorTextColor = 'calculated';
this.actorLineColor = 'calculated';
this.signalColor = 'calculated';
this.signalTextColor = 'calculated';
this.labelBoxBkgColor = 'calculated';
this.labelBoxBorderColor = 'calculated';
this.labelTextColor = 'calculated';
this.loopTextColor = 'calculated';
this.noteBorderColor = 'calculated';
this.noteBkgColor = '#fff5ad';
this.noteTextColor = 'calculated';
this.activationBorderColor = 'calculated';
this.activationBkgColor = 'calculated';
this.sequenceNumberColor = 'black';
/* Gantt chart variables */
this.sectionBkgColor = darken('#EAE8D9', 30);
this.altSectionBkgColor = 'calculated';
this.sectionBkgColor2 = '#EAE8D9';
this.taskBorderColor = rgba(255, 255, 255, 70);
this.taskBkgColor = 'calculated';
this.taskTextColor = 'calculated';
this.taskTextLightColor = 'calculated';
this.taskTextOutsideColor = 'calculated';
this.taskTextClickableColor = '#003163';
this.activeTaskBorderColor = rgba(255, 255, 255, 50);
this.activeTaskBkgColor = '#81B1DB';
this.gridColor = 'calculated';
this.doneTaskBkgColor = 'calculated';
this.doneTaskBorderColor = 'grey';
this.critBorderColor = '#E83737';
this.critBkgColor = '#E83737';
this.taskTextDarkColor = 'calculated';
this.todayLineColor = '#DB5757';
/* state colors */
this.labelColor = 'calculated';
this.errorBkgColor = '#a44141';
this.errorTextColor = '#ddd';
}
updateColors() {
this.secondBkg = lighten(this.mainBkg, 16);
this.lineColor = this.mainContrastColor;
this.arrowheadColor = this.mainContrastColor;
/* Flowchart variables */
this.nodeBkg = this.mainBkg;
this.nodeBorder = this.border1;
this.clusterBkg = this.secondBkg;
this.clusterBorder = this.border2;
this.defaultLinkColor = this.lineColor;
this.edgeLabelBackground = lighten(this.labelBackground, 25);
/* Sequence Diagram variables */
this.actorBorder = this.border1;
this.actorBkg = this.mainBkg;
this.actorTextColor = this.mainContrastColor;
this.actorLineColor = this.mainContrastColor;
this.signalColor = this.mainContrastColor;
this.signalTextColor = this.mainContrastColor;
this.labelBoxBkgColor = this.actorBkg;
this.labelBoxBorderColor = this.actorBorder;
this.labelTextColor = this.mainContrastColor;
this.loopTextColor = this.mainContrastColor;
this.noteBorderColor = this.border2;
this.noteTextColor = this.mainBkg;
this.activationBorderColor = this.border1;
this.activationBkgColor = this.secondBkg;
/* Gantt chart variables */
this.altSectionBkgColor = this.background;
this.taskBkgColor = lighten(this.mainBkg, 23);
this.taskTextColor = this.darkTextColor;
this.taskTextLightColor = this.mainContrastColor;
this.taskTextOutsideColor = this.taskTextLightColor;
this.gridColor = this.mainContrastColor;
this.doneTaskBkgColor = this.mainContrastColor;
this.taskTextDarkColor = this.darkTextColor;
/* state colors */
this.labelColor = this.textColor;
this.altBackground = lighten(this.background, 20);
this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor;
this.fillType2 = adjust(this.primaryColor, { h: 64 });
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
this.fillType4 = adjust(this.primaryColor, { h: -64 });
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
/* class */
this.classText = this.nodeBorder;
}
calculate(overrides) {
if (typeof overrides !== 'object') {
// Calculate colors form base colors
this.updateColors();
return;
}
const keys = Object.keys(overrides);
// Copy values from overrides, this is mainly for base colors
keys.forEach(k => {
this[k] = overrides[k];
});
// Calculate colors form base colors
this.updateColors();
// Copy values from overrides again in case of an override of derived value
keys.forEach(k => {
this[k] = overrides[k];
});
}
}
export const getThemeVariables = userOverrides => {
const theme = new Theme();
theme.calculate(userOverrides);
return theme;
};

165
src/themes/theme-default.js Normal file
View File

@ -0,0 +1,165 @@
import { lighten, rgba, adjust } from 'khroma';
class Theme {
constructor() {
/* Base variables */
this.primaryColor = '#ECECFF';
this.secondaryColor = '#ffffde';
this.background = 'white';
this.mainBkg = '#ECECFF';
this.secondBkg = '#ffffde';
this.lineColor = '#333333';
this.border1 = '#9370DB';
this.border2 = '#aaaa33';
this.arrowheadColor = '#333333';
this.fontFamily = '"trebuchet ms", verdana, arial';
this.fontSize = '16px';
this.labelBackground = '#e8e8e8';
this.textColor = '#333';
/* Flowchart variables */
this.nodeBkg = 'calculated';
this.nodeBorder = 'calculated';
this.clusterBkg = 'calculated';
this.clusterBorder = 'calculated';
this.defaultLinkColor = 'calculated';
this.titleColor = 'calculated';
this.edgeLabelBackground = 'calculated';
/* Sequence Diagram variables */
this.actorBorder = 'calculated';
this.actorBkg = 'calculated';
this.actorTextColor = 'black';
this.actorLineColor = 'grey';
this.signalColor = 'calculated';
this.signalTextColor = 'calculated';
this.labelBoxBkgColor = 'calculated';
this.labelBoxBorderColor = 'calculated';
this.labelTextColor = 'calculated';
this.loopTextColor = 'calculated';
this.noteBorderColor = 'calculated';
this.noteBkgColor = '#fff5ad';
this.noteTextColor = 'calculated';
this.activationBorderColor = '#666';
this.activationBkgColor = '#f4f4f4';
this.sequenceNumberColor = 'white';
/* Gantt chart variables */
this.sectionBkgColor = 'calculated';
this.altSectionBkgColor = 'calculated';
this.sectionBkgColor2 = 'calculated';
this.taskBorderColor = 'calculated';
this.taskBkgColor = 'calculated';
this.taskTextLightColor = 'calculated';
this.taskTextColor = this.taskTextLightColor;
this.taskTextDarkColor = 'calculated';
this.taskTextOutsideColor = this.taskTextDarkColor;
this.taskTextClickableColor = 'calculated';
this.activeTaskBorderColor = 'calculated';
this.activeTaskBkgColor = 'calculated';
this.gridColor = 'calculated';
this.doneTaskBkgColor = 'calculated';
this.doneTaskBorderColor = 'calculated';
this.critBorderColor = 'calculated';
this.critBkgColor = 'calculated';
this.todayLineColor = 'calculated';
this.sectionBkgColor = rgba(102, 102, 255, 0.49);
this.altSectionBkgColor = 'white';
this.sectionBkgColor2 = '#fff400';
this.taskBorderColor = '#534fbc';
this.taskBkgColor = '#8a90dd';
this.taskTextLightColor = 'white';
this.taskTextColor = 'calculated';
this.taskTextDarkColor = 'black';
this.taskTextOutsideColor = 'calculated';
this.taskTextClickableColor = '#003163';
this.activeTaskBorderColor = '#534fbc';
this.activeTaskBkgColor = '#bfc7ff';
this.gridColor = 'lightgrey';
this.doneTaskBkgColor = 'lightgrey';
this.doneTaskBorderColor = 'grey';
this.critBorderColor = '#ff8888';
this.critBkgColor = 'red';
this.todayLineColor = 'red';
/* state colors */
this.labelColor = 'black';
this.errorBkgColor = '#552222';
this.errorTextColor = '#552222';
this.updateColors();
}
updateColors() {
/* Flowchart variables */
this.nodeBkg = this.mainBkg;
this.nodeBorder = this.border1; // border 1
this.clusterBkg = this.secondBkg;
this.clusterBorder = this.border2;
this.defaultLinkColor = this.lineColor;
this.titleColor = this.textColor;
this.edgeLabelBackground = this.labelBackground;
/* Sequence Diagram variables */
// this.actorBorder = lighten(this.border1, 0.5);
this.actorBorder = lighten(this.border1, 23);
this.actorBkg = this.mainBkg;
this.labelBoxBkgColor = this.actorBkg;
this.signalColor = this.textColor;
this.signalTextColor = this.textColor;
this.labelBoxBorderColor = this.actorBorder;
this.labelTextColor = this.actorTextColor;
this.loopTextColor = this.actorTextColor;
this.noteBorderColor = this.border2;
this.noteTextColor = this.actorTextColor;
/* Gantt chart variables */
this.taskTextColor = this.taskTextLightColor;
this.taskTextOutsideColor = this.taskTextDarkColor;
/* state colors */
/* class */
this.classText = this.nodeBorder;
/* journey */
this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor;
this.fillType2 = adjust(this.primaryColor, { h: 64 });
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
this.fillType4 = adjust(this.primaryColor, { h: -64 });
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
}
calculate(overrides) {
if (typeof overrides !== 'object') {
// Calculate colors form base colors
this.updateColors();
return;
}
const keys = Object.keys(overrides);
// Copy values from overrides, this is mainly for base colors
keys.forEach(k => {
this[k] = overrides[k];
});
// Calculate colors form base colors
this.updateColors();
// Copy values from overrides again in case of an override of derived value
keys.forEach(k => {
this[k] = overrides[k];
});
}
}
export const getThemeVariables = userOverrides => {
const theme = new Theme();
theme.calculate(userOverrides);
return theme;
};

140
src/themes/theme-forest.js Normal file
View File

@ -0,0 +1,140 @@
import { darken, adjust } from 'khroma';
class Theme {
constructor() {
/* Base vales */
this.primaryColor = '#cde498';
this.secondaryColor = '#cdffb2';
this.background = 'white';
this.mainBkg = '#cde498';
this.secondBkg = '#cdffb2';
this.lineColor = 'green';
this.border1 = '#13540c';
this.border2 = '#6eaa49';
this.arrowheadColor = 'green';
this.fontFamily = '"trebuchet ms", verdana, arial';
this.fontSize = '16px';
/* Flowchart variables */
this.nodeBkg = 'calculated';
this.nodeBorder = 'calculated';
this.clusterBkg = 'calculated';
this.clusterBorder = 'calculated';
this.defaultLinkColor = 'calculated';
this.titleColor = '#333';
this.edgeLabelBackground = '#e8e8e8';
/* Sequence Diagram variables */
this.actorBorder = 'calculated';
this.actorBkg = 'calculated';
this.actorTextColor = 'black';
this.actorLineColor = 'grey';
this.signalColor = '#333';
this.signalTextColor = '#333';
this.labelBoxBkgColor = 'calculated';
this.labelBoxBorderColor = '#326932';
this.labelTextColor = 'calculated';
this.loopTextColor = 'calculated';
this.noteBorderColor = 'calculated';
this.noteBkgColor = '#fff5ad';
this.noteTextColor = 'calculated';
this.activationBorderColor = '#666';
this.activationBkgColor = '#f4f4f4';
this.sequenceNumberColor = 'white';
/* Gantt chart variables */
this.sectionBkgColor = '#6eaa49';
this.altSectionBkgColor = 'white';
this.sectionBkgColor2 = '#6eaa49';
this.taskBorderColor = 'calculated';
this.taskBkgColor = '#487e3a';
this.taskTextLightColor = 'white';
this.taskTextColor = 'calculated';
this.taskTextDarkColor = 'black';
this.taskTextOutsideColor = 'calculated';
this.taskTextClickableColor = '#003163';
this.activeTaskBorderColor = 'calculated';
this.activeTaskBkgColor = 'calculated';
this.gridColor = 'lightgrey';
this.doneTaskBkgColor = 'lightgrey';
this.doneTaskBorderColor = 'grey';
this.critBorderColor = '#ff8888';
this.critBkgColor = 'red';
this.todayLineColor = 'red';
/* state colors */
this.labelColor = 'black';
this.errorBkgColor = '#552222';
this.errorTextColor = '#552222';
}
updateColors() {
/* Flowchart variables */
this.nodeBkg = this.mainBkg;
this.nodeBorder = this.border1;
this.clusterBkg = this.secondBkg;
this.clusterBorder = this.border2;
this.defaultLinkColor = this.lineColor;
/* Sequence Diagram variables */
this.actorBorder = darken(this.mainBkg, 20);
this.actorBkg = this.mainBkg;
this.labelBoxBkgColor = this.actorBkg;
this.labelTextColor = this.actorTextColor;
this.loopTextColor = this.actorTextColor;
this.noteBorderColor = this.border2;
this.noteTextColor = this.actorTextColor;
/* Gantt chart variables */
this.taskBorderColor = this.border1;
this.taskTextColor = this.taskTextLightColor;
this.taskTextOutsideColor = this.taskTextDarkColor;
this.activeTaskBorderColor = this.taskBorderColor;
this.activeTaskBkgColor = this.mainBkg;
/* state colors */
/* class */
this.classText = this.nodeBorder;
/* journey */
this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor;
this.fillType2 = adjust(this.primaryColor, { h: 64 });
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
this.fillType4 = adjust(this.primaryColor, { h: -64 });
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
}
calculate(overrides) {
if (typeof overrides !== 'object') {
// Calculate colors form base colors
this.updateColors();
return;
}
const keys = Object.keys(overrides);
// Copy values from overrides, this is mainly for base colors
keys.forEach(k => {
this[k] = overrides[k];
});
// Calculate colors form base colors
this.updateColors();
// Copy values from overrides again in case of an override of derived value
keys.forEach(k => {
this[k] = overrides[k];
});
}
}
export const getThemeVariables = userOverrides => {
const theme = new Theme();
theme.calculate(userOverrides);
return theme;
};

173
src/themes/theme-neutral.js Normal file
View File

@ -0,0 +1,173 @@
import { darken, lighten, adjust } from 'khroma';
// const Color = require ( 'khroma/dist/color' ).default
// Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
class Theme {
constructor() {
this.primaryColor = '#eee';
this.contrast = '#26a';
this.secondaryColor = lighten(this.contrast, 55);
this.background = 'white';
this.mainBkg = '#eee';
this.secondBkg = 'calculated';
this.lineColor = '#666';
this.border1 = '#999';
this.border2 = 'calculated';
this.note = '#ffa';
this.text = '#333';
this.critical = '#d42';
this.done = '#bbb';
this.arrowheadColor = '#333333';
this.fontFamily = '"trebuchet ms", verdana, arial';
this.fontSize = '16px';
/* Flowchart variables */
this.nodeBkg = 'calculated';
this.nodeBorder = 'calculated';
this.clusterBkg = 'calculated';
this.clusterBorder = 'calculated';
this.defaultLinkColor = 'calculated';
this.titleColor = 'calculated';
this.edgeLabelBackground = 'white';
/* Sequence Diagram variables */
this.actorBorder = 'calculated';
this.actorBkg = 'calculated';
this.actorTextColor = 'calculated';
this.actorLineColor = 'calculated';
this.signalColor = 'calculated';
this.signalTextColor = 'calculated';
this.labelBoxBkgColor = 'calculated';
this.labelBoxBorderColor = 'calculated';
this.labelTextColor = 'calculated';
this.loopTextColor = 'calculated';
this.noteBorderColor = 'calculated';
this.noteBkgColor = 'calculated';
this.noteTextColor = 'calculated';
this.activationBorderColor = '#666';
this.activationBkgColor = '#f4f4f4';
this.sequenceNumberColor = 'white';
/* Gantt chart variables */
this.sectionBkgColor = 'calculated';
this.altSectionBkgColor = 'white';
this.sectionBkgColor2 = 'calculated';
this.taskBorderColor = 'calculated';
this.taskBkgColor = 'calculated';
this.taskTextLightColor = 'white';
this.taskTextColor = 'calculated';
this.taskTextDarkColor = 'calculated';
this.taskTextOutsideColor = 'calculated';
this.taskTextClickableColor = '#003163';
this.activeTaskBorderColor = 'calculated';
this.activeTaskBkgColor = 'calculated';
this.gridColor = 'calculated';
this.doneTaskBkgColor = 'calculated';
this.doneTaskBorderColor = 'calculated';
this.critBkgColor = 'calculated';
this.critBorderColor = 'calculated';
this.todayLineColor = 'calculated';
/* state colors */
this.labelColor = 'black';
this.errorBkgColor = '#552222';
this.errorTextColor = '#552222';
}
updateColors() {
this.secondBkg = lighten(this.contrast, 55);
this.border2 = this.contrast;
/* Flowchart variables */
this.nodeBkg = this.mainBkg;
this.nodeBorder = this.border1;
this.clusterBkg = this.secondBkg;
this.clusterBorder = this.border2;
this.defaultLinkColor = this.lineColor;
this.titleColor = this.text;
/* Sequence Diagram variables */
this.actorBorder = lighten(this.border1, 23);
this.actorBkg = this.mainBkg;
this.actorTextColor = this.text;
this.actorLineColor = this.lineColor;
this.signalColor = this.text;
this.signalTextColor = this.text;
this.labelBoxBkgColor = this.actorBkg;
this.labelBoxBorderColor = this.actorBorder;
this.labelTextColor = this.text;
this.loopTextColor = this.text;
this.noteBorderColor = darken(this.note, 60);
this.noteBkgColor = this.note;
this.noteTextColor = this.actorTextColor;
/* Gantt chart variables */
this.sectionBkgColor = lighten(this.contrast, 30);
this.sectionBkgColor2 = lighten(this.contrast, 30);
this.taskBorderColor = darken(this.contrast, 10);
this.taskBkgColor = this.contrast;
this.taskTextColor = this.taskTextLightColor;
this.taskTextDarkColor = this.text;
this.taskTextOutsideColor = this.taskTextDarkColor;
this.activeTaskBorderColor = this.taskBorderColor;
this.activeTaskBkgColor = this.mainBkg;
this.gridColor = lighten(this.border1, 30);
this.doneTaskBkgColor = this.done;
this.doneTaskBorderColor = this.lineColor;
this.critBkgColor = this.critical;
this.critBorderColor = darken(this.critBkgColor, 10);
this.todayLineColor = this.critBkgColor;
/* state colors */
/* class */
this.classText = this.nodeBorder;
/* journey */
this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor;
this.fillType2 = adjust(this.primaryColor, { h: 64 });
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
this.fillType4 = adjust(this.primaryColor, { h: -64 });
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
}
calculate(overrides) {
if (typeof overrides !== 'object') {
// Calculate colors form base colors
this.updateColors();
return;
}
const keys = Object.keys(overrides);
// Copy values from overrides, this is mainly for base colors
keys.forEach(k => {
this[k] = overrides[k];
});
// Calculate colors form base colors
this.updateColors();
// Copy values from overrides again in case of an override of derived value
keys.forEach(k => {
this[k] = overrides[k];
});
}
}
export const getThemeVariables = userOverrides => {
const theme = new Theme();
theme.calculate(userOverrides);
console.info('Theme', userOverrides, theme);
return theme;
};

14
src/utils.js
View File

@ -15,7 +15,7 @@ import {
import { logger } from './logger';
import { sanitizeUrl } from '@braintree/sanitize-url';
import common from './diagrams/common/common';
import cryptoRandomString from 'crypto-random-string';
// import cryptoRandomString from 'crypto-random-string';
// Effectively an enum of the supported curve types, accessible by name
const d3CurveTypes = {
@ -408,8 +408,18 @@ export const generateId = () => {
);
};
function makeid(length) {
var result = '';
var characters = '0123456789abcdef';
var charactersLength = characters.length;
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
export const random = options => {
return cryptoRandomString(options);
return makeid(options.length);
};
/**

308795
stats.json Normal file
View File

File diff suppressed because one or more lines are too long

56
yarn.lock
View File

@ -2890,6 +2890,14 @@ color@3.0.x:
color-convert "^1.9.1"
color-string "^1.5.2"
color@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
dependencies:
color-convert "^1.9.1"
color-string "^1.5.2"
colornames@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/colornames/-/colornames-1.1.1.tgz#f8889030685c7c4ff9e2a559f5077eb76a816f96"
@ -3188,13 +3196,6 @@ crypto-browserify@^3.11.0:
randombytes "^2.0.0"
randomfill "^1.0.3"
crypto-random-string@^3.0.1:
version "3.1.0"
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-3.1.0.tgz#0368382de82e914179ad2ca9c7a788e260184bae"
integrity sha512-Tip3yGB+bA7B0W8E4K4mNf2rZhu5r2G5Tb89/utEl5tP1QuLjTF/S9a1b8ifDrR4ORc9Utf6tscpSEtBY3YcPQ==
dependencies:
type-fest "^0.8.1"
css-b64-images@~0.2.5:
version "0.2.5"
resolved "https://registry.yarnpkg.com/css-b64-images/-/css-b64-images-0.2.5.tgz#42005d83204b2b4a5d93b6b1a5644133b5927a02"
@ -4125,11 +4126,6 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
escaper@^2.5.3:
version "2.5.3"
resolved "https://registry.yarnpkg.com/escaper/-/escaper-2.5.3.tgz#8b8fe90ba364054151ab7eff18b4ce43b1e13ab5"
integrity sha512-QGb9sFxBVpbzMggrKTX0ry1oiI4CSDAl9vIL702hzl1jGW8VZs7qfqTRX7WDOjoNDoEVGcEtu1ZOQgReSfT2kQ==
escodegen@1.3.x:
version "1.3.3"
resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.3.3.tgz#f024016f5a88e046fd12005055e939802e6c5f23"
@ -6039,11 +6035,6 @@ is-regex@^1.0.4, is-regex@^1.0.5:
dependencies:
has "^1.0.3"
is-regexp@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
is-relative@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d"
@ -6722,6 +6713,11 @@ jssha@^2.1.0:
resolved "https://registry.yarnpkg.com/jssha/-/jssha-2.3.1.tgz#147b2125369035ca4b2f7d210dc539f009b3de9a"
integrity sha1-FHshJTaQNcpLL30hDcU58Amz3po=
khroma@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/khroma/-/khroma-1.1.0.tgz#cc17723eb719c5245ea66d23dd577d5695452db5"
integrity sha512-aTO+YX22tYOLEQJYFiatAj1lc5QZ+H5sHWFRBWNCiKwc5NWNUJZyeSeiHEPeURJ2a1GEVYcmyMUwGjjLe5ec5A==
killable@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@ -9347,15 +9343,6 @@ schema-utils@^2.6.4:
ajv "^6.10.2"
ajv-keywords "^3.4.1"
scope-css@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/scope-css/-/scope-css-1.2.1.tgz#c35768bc900cad030a3e0d663a818c0f6a57f40e"
integrity sha512-UjLRmyEYaDNiOS673xlVkZFlVCtckJR/dKgr434VMm7Lb+AOOqXKdAcY7PpGlJYErjXXJzKN7HWo4uRPiZZG0Q==
dependencies:
escaper "^2.5.3"
slugify "^1.3.1"
strip-css-comments "^3.0.0"
scss-tokenizer@^0.2.3:
version "0.2.3"
resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@ -9563,11 +9550,6 @@ slice-ansi@^2.1.0:
astral-regex "^1.0.0"
is-fullwidth-code-point "^2.0.0"
slugify@^1.3.1:
version "1.3.6"
resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.3.6.tgz#ba5fd6159b570fe4811d02ea9b1f4906677638c3"
integrity sha512-wA9XS475ZmGNlEnYYLPReSfuz/c3VQsEMoU43mi6OnKMCdbnFXd4/Yg7J0lBv8jkPolacMpOrWEaoYxuE1+hoQ==
snapdragon-node@^2.0.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@ -10019,13 +10001,6 @@ strip-bom@^3.0.0:
resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
strip-css-comments@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/strip-css-comments/-/strip-css-comments-3.0.0.tgz#7a5625eff8a2b226cf8947a11254da96e13dae89"
integrity sha1-elYl7/iisibPiUehElTaluE9rok=
dependencies:
is-regexp "^1.0.0"
strip-eof@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
@ -10053,6 +10028,11 @@ strip-json-comments@^3.0.1:
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
stylis@^3.5.2:
version "3.5.4"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
subarg@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"