Merge branch 'develop' of github.com:sidharthv96/mermaid into fix/entity-decode
* 'develop' of github.com:sidharthv96/mermaid: Update flowchart.md Added new theme user journey diagram specific theme variables fix typo 2122 Blöockling javascript urls fix: Assign proper namespaces to foreignObject children Small positoining fix for parallell processes and nested composite states Version update in the docs Updated version in package.json and recompile Lint fix fix typo Fix for styling Fox fr keeping the label background in state diagrams Removed unused dependency "he" Ensuring "minify" is only listed as a dev dependency Update n00b-syntaxReference.md Update _sidebar.md [docs] Update default log level value
This commit is contained in:
Sidharth Vinod
commit
ed6abb6d92
|
|
@ -53,5 +53,15 @@ describe('XSS', () => {
|
|||
cy.wait(1000);
|
||||
cy.get('#the-malware').should('not.exist');
|
||||
})
|
||||
it('should not allow maniplulating htmlLabels into a false positive', () => {
|
||||
cy.visit('http://localhost:9000/xss4.html');
|
||||
cy.wait(1000);
|
||||
cy.get('#the-malware').should('not.exist');
|
||||
})
|
||||
it('should not allow maniplulating antiscript to run javascript', () => {
|
||||
cy.visit('http://localhost:9000/xss5.html');
|
||||
cy.wait(1000);
|
||||
cy.get('#the-malware').should('not.exist');
|
||||
})
|
||||
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
const div = parent.document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
div.className = 'malware';
|
||||
div.innerHTML = 'XSS Succeeded';
|
||||
parent.document.getElementsByTagName('body')[0].appendChild(div);
|
||||
throw new Error('XSS Succeded');
|
||||
|
|
@ -66,18 +66,43 @@ stateDiagram-v2
|
|||
|
||||
</div>
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
%%{init:{"theme":"forest", "themeVariables": {
|
||||
|
||||
}}}%%
|
||||
%% "specialStateColor":"red", "innerEndBackground":"lightgreen"
|
||||
stateDiagram-v2
|
||||
state fork [[fork]]
|
||||
state join [[join]]
|
||||
[*] --> fork
|
||||
fork --> Test
|
||||
Test --> join
|
||||
join --> [*]
|
||||
stateDiagram-v2
|
||||
state CompositeState {
|
||||
state AnotherCompositeState1234567890 {
|
||||
YourState
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
stateDiagram-v2
|
||||
state CS {
|
||||
state ACS {
|
||||
YourState
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
state Active {
|
||||
[*] --> NumLockOff
|
||||
NumLockOff --> NumLockOn : EvNumLockPressed
|
||||
NumLockOn --> NumLockOff : EvNumLockPressed
|
||||
--
|
||||
[*] --> CapsLockOff
|
||||
CapsLockOff --> CapsLockOn : EvCapsLockPressed
|
||||
CapsLockOn --> CapsLockOff : EvCapsLockPressed
|
||||
}
|
||||
state SomethingElse {
|
||||
A --> B
|
||||
B --> A
|
||||
}
|
||||
|
||||
Active --> SomethingElse
|
||||
note right of SomethingElse : This is the note to the right.
|
||||
|
||||
SomethingElse --> [*] </div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
|
|
|
|||
|
|
@ -21,155 +21,28 @@
|
|||
.mermaid svg {
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
display: flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: monospace;
|
||||
font-size: 72px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>info below</div>
|
||||
<div>Security check</div>
|
||||
<div class="flex">
|
||||
<div class="mermaid2" style="width: 100%; height: 400px;">
|
||||
%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%%
|
||||
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"
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 400px;">
|
||||
flowchart TD
|
||||
A[Christmas] ==> D
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
A[Christmas] ==> C
|
||||
subgraph T ["Test"]
|
||||
A
|
||||
B
|
||||
C
|
||||
end
|
||||
|
||||
classDef Test fill:#F84E68,stroke:#333,color:white;
|
||||
class A,T Test
|
||||
classDef TestSub fill:green;
|
||||
class T TestSub
|
||||
linkStyle 0,1 color:orange, stroke: orange;
|
||||
</div>
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
graph TD
|
||||
subgraph S1
|
||||
sub1 -->sub2
|
||||
end
|
||||
subgraph S2
|
||||
sub4
|
||||
end
|
||||
S1 --> S2
|
||||
sub1 --> sub4
|
||||
</div>
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
graph TB
|
||||
A --> B
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
stateDiagram-v2
|
||||
state S1 {
|
||||
sub1 -->sub2
|
||||
}
|
||||
state S2 {
|
||||
sub4
|
||||
}
|
||||
S1 --> S2
|
||||
sub1 --> sub4
|
||||
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
requirementDiagram
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
functionalRequirement test_req2 {
|
||||
id: 1.1
|
||||
text: the second test text.
|
||||
risk: low
|
||||
verifymethod: inspection
|
||||
}
|
||||
|
||||
performanceRequirement test_req3 {
|
||||
id: 1.2
|
||||
text: the third test text.
|
||||
risk: medium
|
||||
verifymethod: demonstration
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
element test_entity2 {
|
||||
type: word doc
|
||||
docRef: reqs/test_entity
|
||||
}
|
||||
|
||||
|
||||
test_entity - satisfies -> test_req2
|
||||
test_req - traces -> test_req2
|
||||
test_req - contains -> test_req3
|
||||
test_req <- copies - test_entity2
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||
flowchart LR
|
||||
classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
|
||||
Lorem --> Ipsum --> Dolor
|
||||
class Lorem,Dolor dark
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||
%%{init: {'theme': 'base' }}%%
|
||||
%%{init2: { 'logLevel': 0, 'theme': 'forest'} }%%
|
||||
flowchart TD
|
||||
L1 --- L2
|
||||
L2 --- C
|
||||
M1 ---> C
|
||||
R1 .-> R2
|
||||
R2 <.-> C
|
||||
C -->|Label 1| E1
|
||||
C <-- Label 2 ---> E2
|
||||
C ----> E3
|
||||
C <-...-> E4
|
||||
C ======> E5
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 21%;">
|
||||
flowchart LR
|
||||
A[red text] -->|default style| B(blue text)
|
||||
C([red text]) -->|default style| D[[blue text]]
|
||||
E[(red text)] -->|default style| F((blue text))
|
||||
G>red text] -->|default style| H{blue text}
|
||||
I{{red text}} -->|default style| J[/blue text/]
|
||||
K[
|
||||
ed text] -->|default style| L[/blue text]
|
||||
M[
|
||||
ed text/] -->|default style| N[blue text]
|
||||
linkStyle default color:Sienna;
|
||||
style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style B stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style F stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style H stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style J stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style L stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style N stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</div>
|
||||
|
||||
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
|
|
@ -187,7 +60,7 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
},
|
||||
htmlLabels: true,
|
||||
htmlLabels: false,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
|
|
@ -195,10 +68,26 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|||
// fontFamily: 'courier',
|
||||
fontSize: 18,
|
||||
curve: 'basis',
|
||||
securityLevel: 'loose',
|
||||
securityLevel: 'strict',
|
||||
startOnLoad: false
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
|
||||
var diagram = "%%{init: {\"flowchart\": {\"htmlLabels\": \"false\"}} }%%\n";
|
||||
diagram += "flowchart\n";
|
||||
diagram += "A[\"<ifra";
|
||||
diagram += "me srcdoc='<scrip";
|
||||
diagram += "t src=http://localhost:9000/exploit.js>";
|
||||
diagram += "</scr"
|
||||
diagram += "ipt>'></iframe>\"]";
|
||||
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
<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';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
.mermaid svg {
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
display: flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: monospace;
|
||||
font-size: 72px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>Security check</div>
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
state: {
|
||||
defaultRenderer: 'dagre-wrapper',
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
},
|
||||
htmlLabels: false,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
fontSize: 18,
|
||||
curve: 'basis',
|
||||
securityLevel: 'strict',
|
||||
startOnLoad: false,
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
|
||||
var diagram = "%%{init: {\"flowchart\": {\"htmlLabels\": \"true\"}} }%%\n";
|
||||
diagram += "flowchart\n";
|
||||
diagram += "A[\"<ifra";
|
||||
diagram += "me srcdoc='<scrip";
|
||||
diagram += "t src=http://localhost:9000/exploit.js>";
|
||||
diagram += "</scr"
|
||||
diagram += "ipt>'></iframe>\"]";
|
||||
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<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';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
.mermaid svg {
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
display: flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: monospace;
|
||||
font-size: 72px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>Security check</div>
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
state: {
|
||||
defaultRenderer: 'dagre-wrapper',
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
fontSize: 18,
|
||||
curve: 'basis',
|
||||
securityLevel: 'antiscript',
|
||||
startOnLoad: false,
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function xssAttack(){
|
||||
const div = document.createElement('div')
|
||||
div.id = 'the-malware'
|
||||
div.className = 'malware'
|
||||
div.innerHTML = 'XSS Succeeded'
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
throw new Error('XSS Succeded');
|
||||
}
|
||||
var diagram = "graph LR\n";
|
||||
diagram += "B-->D\(\"<img onerror=location=\`java";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
diagram += "script\x3a;xssAttack\u0028\u0029\` src=x>\"\);\n";
|
||||
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -97,7 +97,7 @@ Default value: '"trebuchet ms", verdana, arial, sans-serif;'.
|
|||
|
||||
**Notes**:
|
||||
|
||||
- **strict**: (**default**) tags in text are encoded, click functionality is disabeled
|
||||
- **strict**: (**default**) tags in text are encoded, click functionality is disabled
|
||||
- **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
|
||||
|
||||
|
|
@ -1110,7 +1110,7 @@ mermaidAPI.initialize({
|
|||
<script>
|
||||
var config = {
|
||||
theme:'default',
|
||||
logLevel:'fatal',
|
||||
logLevel: 5, // corresponds with "fatal"
|
||||
securityLevel:'strict',
|
||||
startOnLoad:true,
|
||||
arrowMarkerAbsolute:false,
|
||||
|
|
|
|||
|
|
@ -587,7 +587,7 @@ flowchart TB
|
|||
|
||||
## Direction in subgraphs
|
||||
|
||||
With the graphtype flowcharts you can use the direction state4ment to set the direction which the subgraph will render like in this example.
|
||||
With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
|
||||
|
||||
```
|
||||
flowchart LR
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
|
||||
<link rel="stylesheet" href="theme.css"> <script src="//cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js"></script>
|
||||
<link rel="stylesheet" href="theme.css"> <script src="//cdn.jsdelivr.net/npm/mermaid@8.10.2/dist/mermaid.min.js"></script>
|
||||
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
|
|
|||
|
|
@ -1,16 +1,46 @@
|
|||
# Diagram Syntax
|
||||
Mermaid's syntax is used to create diagrams.The next section dives deep into the syntax of each type,
|
||||
Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type.
|
||||
|
||||
Syntax, together with Deployment and Configuration constitute the whole of Mermaid.
|
||||
|
||||
Use the next section for reference and the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor) as apractice area. Adittionally, the [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
|
||||
Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor), it is also a great practice area.
|
||||
|
||||
## Syntax Structure
|
||||
One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate.
|
||||
|
||||
**Example** : The code below is for an Entity Relationship Diagram, specified by the `erDiagram` declaration. What follows is the definition of the different `Entities` represented in it.
|
||||
|
||||
```
|
||||
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"
|
||||
```
|
||||
```mermaid
|
||||
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"
|
||||
```
|
||||
|
||||
|
||||
The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
|
||||
|
||||
You'll find that Mermaid's Syntax is not too tricky and it can be learned in a day.
|
||||
|
||||
|
||||
## Diagram Breaking
|
||||
|
||||
One should beware the use of some words or symbols that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated.
|
||||
One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated.
|
||||
|
||||
|
||||
| Diagram Breakers | Reason |Solution|
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mermaid",
|
||||
"version": "8.10.1",
|
||||
"version": "8.10.2",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"main": "dist/mermaid.core.js",
|
||||
"keywords": [
|
||||
|
|
@ -54,7 +54,6 @@
|
|||
"dagre-d3": "^0.6.4",
|
||||
"graphlib": "^2.1.7",
|
||||
"khroma": "^1.1.0",
|
||||
"minify": "^4.1.1",
|
||||
"moment-mini": "^2.22.1",
|
||||
"stylis": "^3.5.2"
|
||||
},
|
||||
|
|
@ -79,6 +78,7 @@
|
|||
"identity-obj-proxy": "^3.0.0",
|
||||
"jest": "^24.9.0",
|
||||
"jison": "^0.4.18",
|
||||
"minify": "^4.1.1",
|
||||
"moment": "^2.23.0",
|
||||
"node-sass": "^5.0.0",
|
||||
"prettier": "^1.18.2",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { log } from '../logger';
|
|||
import createLabel from './createLabel';
|
||||
import { select } from 'd3';
|
||||
import { getConfig } from '../config';
|
||||
import { evaluate } from '../diagrams/common/common';
|
||||
|
||||
const rect = (parent, node) => {
|
||||
log.trace('Creating subgraph rect for ', node.id, node);
|
||||
|
|
@ -26,7 +27,7 @@ const rect = (parent, node) => {
|
|||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = text.children[0];
|
||||
const dv = select(text);
|
||||
bbox = div.getBoundingClientRect();
|
||||
|
|
@ -132,7 +133,7 @@ const roundedWithTitle = (parent, node) => {
|
|||
|
||||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = text.children[0];
|
||||
const dv = select(text);
|
||||
bbox = div.getBoundingClientRect();
|
||||
|
|
@ -145,7 +146,7 @@ const roundedWithTitle = (parent, node) => {
|
|||
|
||||
const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width;
|
||||
if (node.width <= bbox.width + node.padding) {
|
||||
node.diff = (bbox.width + node.padding - node.width) / 2;
|
||||
node.diff = (bbox.width + node.padding * 0 - node.width) / 2;
|
||||
} else {
|
||||
node.diff = -node.padding / 2;
|
||||
}
|
||||
|
|
@ -170,7 +171,10 @@ const roundedWithTitle = (parent, node) => {
|
|||
'translate(' +
|
||||
(node.x - bbox.width / 2) +
|
||||
', ' +
|
||||
(node.y - node.height / 2 - node.padding / 3 + (getConfig().flowchart.htmlLabels ? 5 : 3)) +
|
||||
(node.y -
|
||||
node.height / 2 -
|
||||
node.padding / 3 +
|
||||
(evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
|
||||
')'
|
||||
);
|
||||
|
||||
|
|
@ -208,7 +212,7 @@ const divider = (parent, node) => {
|
|||
const rectBox = rect.node().getBBox();
|
||||
node.width = rectBox.width;
|
||||
node.height = rectBox.height;
|
||||
|
||||
node.diff = -node.padding / 2;
|
||||
node.intersect = function(point) {
|
||||
return intersectRect(node, point);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { select } from 'd3';
|
||||
import { log } from '../logger'; // eslint-disable-line
|
||||
import { evaluate } from '../diagrams/common/common';
|
||||
// let vertexNode;
|
||||
// if (getConfig().flowchart.htmlLabels) {
|
||||
// if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
// // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
|
||||
// const node = {
|
||||
// label: vertexText.replace(/fa[lrsb]?:fa-[\w-]+/g, s => `<i class='${s.replace(':', ' ')}'></i>`)
|
||||
|
|
@ -86,7 +87,7 @@ function addHtmlLabel(node) {
|
|||
const createLabel = (_vertexText, style, isTitle, isNode) => {
|
||||
let vertexText = _vertexText || '';
|
||||
if (typeof vertexText === 'object') vertexText = vertexText[0];
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
|
||||
vertexText = vertexText.replace(/\\n|\n/g, '<br />');
|
||||
log.info('vertexText' + vertexText);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import createLabel from './createLabel';
|
|||
import { line, curveBasis, select } from 'd3';
|
||||
import { getConfig } from '../config';
|
||||
import utils from '../utils';
|
||||
// import { calcLabelPosition } from '../utils';
|
||||
import { evaluate } from '../diagrams/common/common';
|
||||
|
||||
let edgeLabels = {};
|
||||
let terminalLabels = {};
|
||||
|
|
@ -27,7 +27,7 @@ export const insertEdgeLabel = (elem, edge) => {
|
|||
|
||||
// Center the label
|
||||
let bbox = labelElement.getBBox();
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = labelElement.children[0];
|
||||
const dv = select(labelElement);
|
||||
bbox = div.getBoundingClientRect();
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import intersect from './intersect/index.js';
|
|||
import createLabel from './createLabel';
|
||||
import note from './shapes/note';
|
||||
import { parseMember } from '../diagrams/class/svgDraw';
|
||||
import { evaluate } from '../diagrams/common/common';
|
||||
|
||||
const question = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
|
|
@ -370,7 +371,7 @@ const rectWithTitle = (parent, node) => {
|
|||
|
||||
const text = label.node().appendChild(createLabel(title, node.labelStyle, true, true));
|
||||
let bbox;
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = text.children[0];
|
||||
const dv = select(text);
|
||||
bbox = div.getBoundingClientRect();
|
||||
|
|
@ -386,7 +387,7 @@ const rectWithTitle = (parent, node) => {
|
|||
createLabel(textRows.join ? textRows.join('<br/>') : textRows, node.labelStyle, true, true)
|
||||
);
|
||||
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = descr.children[0];
|
||||
const dv = select(descr);
|
||||
bbox = div.getBoundingClientRect();
|
||||
|
|
@ -648,7 +649,7 @@ const class_box = (parent, node) => {
|
|||
.node()
|
||||
.appendChild(createLabel(interfaceLabelText, node.labelStyle, true, true));
|
||||
let interfaceBBox = interfaceLabel.getBBox();
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = interfaceLabel.children[0];
|
||||
const dv = select(interfaceLabel);
|
||||
interfaceBBox = div.getBoundingClientRect();
|
||||
|
|
@ -670,7 +671,7 @@ const class_box = (parent, node) => {
|
|||
.appendChild(createLabel(classTitleString, node.labelStyle, true, true));
|
||||
select(classTitleLabel).attr('class', 'classTitle');
|
||||
let classTitleBBox = classTitleLabel.getBBox();
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = classTitleLabel.children[0];
|
||||
const dv = select(classTitleLabel);
|
||||
classTitleBBox = div.getBoundingClientRect();
|
||||
|
|
@ -688,7 +689,7 @@ const class_box = (parent, node) => {
|
|||
.node()
|
||||
.appendChild(createLabel(parsedText, node.labelStyle, true, true));
|
||||
let bbox = lbl.getBBox();
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = lbl.children[0];
|
||||
const dv = select(lbl);
|
||||
bbox = div.getBoundingClientRect();
|
||||
|
|
@ -711,7 +712,7 @@ const class_box = (parent, node) => {
|
|||
.node()
|
||||
.appendChild(createLabel(parsedText, node.labelStyle, true, true));
|
||||
let bbox = lbl.getBBox();
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = lbl.children[0];
|
||||
const dv = select(lbl);
|
||||
bbox = div.getBoundingClientRect();
|
||||
|
|
@ -791,7 +792,7 @@ const class_box = (parent, node) => {
|
|||
});
|
||||
//
|
||||
// let bbox;
|
||||
// if (getConfig().flowchart.htmlLabels) {
|
||||
// if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
// const div = interfaceLabel.children[0];
|
||||
// const dv = select(interfaceLabel);
|
||||
// bbox = div.getBoundingClientRect();
|
||||
|
|
@ -807,7 +808,7 @@ const class_box = (parent, node) => {
|
|||
// .node()
|
||||
// .appendChild(createLabel(textRows.join('<br/>'), node.labelStyle, true, true));
|
||||
|
||||
// if (getConfig().flowchart.htmlLabels) {
|
||||
// if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
// const div = descr.children[0];
|
||||
// const dv = select(descr);
|
||||
// bbox = div.getBoundingClientRect();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import createLabel from '../createLabel';
|
||||
import { getConfig } from '../../config';
|
||||
import { select } from 'd3';
|
||||
import { evaluate } from '../../diagrams/common/common';
|
||||
export const labelHelper = (parent, node, _classes, isNode) => {
|
||||
let classes;
|
||||
if (!_classes) {
|
||||
|
|
@ -27,7 +28,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
|
|||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = text.children[0];
|
||||
const dv = select(text);
|
||||
bbox = div.getBoundingClientRect();
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ const config = {
|
|||
*
|
||||
* **Notes**:
|
||||
*
|
||||
* - **strict**: (**default**) tags in text are encoded, click functionality is disabeled
|
||||
* - **strict**: (**default**) tags in text are encoded, click functionality is disabled
|
||||
* - **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
|
||||
*/
|
||||
|
|
@ -966,7 +966,7 @@ top of the chart
|
|||
*
|
||||
* Default value: 'dagre-d3'
|
||||
*/
|
||||
defaultRenderer: 'dagre-d3'
|
||||
defaultRenderer: 'dagre-wrapper'
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export const addClasses = function(classes, g) {
|
|||
|
||||
// We create a SVG label, either by delegating to addHtmlLabel or manually
|
||||
// let vertexNode;
|
||||
// if (getConfig().flowchart.htmlLabels) {
|
||||
// if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
// const node = {
|
||||
// label: vertexText.replace(
|
||||
// /fa[lrsb]?:fa-[\w-]+/g,
|
||||
|
|
|
|||
|
|
@ -26,6 +26,10 @@ export const removeScript = txt => {
|
|||
break;
|
||||
}
|
||||
}
|
||||
|
||||
rs = rs.replace('javascript:', '#');
|
||||
rs = rs.replace('<iframe', '');
|
||||
|
||||
return rs;
|
||||
};
|
||||
|
||||
|
|
@ -90,6 +94,8 @@ const getUrl = useAbsolute => {
|
|||
return url;
|
||||
};
|
||||
|
||||
export const evaluate = val => (val === 'false' || val === false ? false : true);
|
||||
|
||||
export default {
|
||||
getRows,
|
||||
sanitizeText,
|
||||
|
|
@ -97,5 +103,6 @@ export default {
|
|||
splitBreaks,
|
||||
lineBreakRegex,
|
||||
removeScript,
|
||||
getUrl
|
||||
getUrl,
|
||||
evaluate
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { getConfig } from '../../config';
|
|||
import { render } from '../../dagre-wrapper/index.js';
|
||||
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
|
||||
import { log } from '../../logger';
|
||||
import common from '../common/common';
|
||||
import common, { evaluate } from '../common/common';
|
||||
import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
|
||||
|
||||
const conf = {};
|
||||
|
|
@ -48,7 +48,7 @@ export const addVertices = function(vert, g, svgId) {
|
|||
|
||||
// We create a SVG label, either by delegating to addHtmlLabel or manually
|
||||
let vertexNode;
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
|
||||
const node = {
|
||||
label: vertexText.replace(
|
||||
|
|
@ -292,7 +292,7 @@ export const addEdges = function(edges, g) {
|
|||
edgeData.arrowheadStyle = 'fill: #333';
|
||||
edgeData.labelpos = 'c';
|
||||
}
|
||||
// if (getConfig().flowchart.htmlLabels && false) {
|
||||
// if (evaluate(getConfig().flowchart.htmlLabels) && false) {
|
||||
// // eslint-disable-line
|
||||
// edgeData.labelType = 'html';
|
||||
// edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text}</span>`;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { getConfig } from '../../config';
|
|||
import dagreD3 from 'dagre-d3';
|
||||
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
|
||||
import { log } from '../../logger';
|
||||
import common from '../common/common';
|
||||
import common, { evaluate } from '../common/common';
|
||||
import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
|
||||
import flowChartShapes from './flowChartShapes';
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ export const addVertices = function(vert, g, svgId) {
|
|||
|
||||
// We create a SVG label, either by delegating to addHtmlLabel or manually
|
||||
let vertexNode;
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
|
||||
const node = {
|
||||
label: vertexText.replace(
|
||||
|
|
@ -228,7 +228,7 @@ export const addEdges = function(edges, g) {
|
|||
edgeData.arrowheadStyle = 'fill: #333';
|
||||
edgeData.labelpos = 'c';
|
||||
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
edgeData.labelType = 'html';
|
||||
edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text.replace(
|
||||
/fa[lrsb]?:fa-[\w-]+/g,
|
||||
|
|
@ -451,7 +451,7 @@ export const draw = function(text, id) {
|
|||
}
|
||||
|
||||
// Add label rects for non html labels
|
||||
if (!conf.htmlLabels || true) { // eslint-disable-line
|
||||
if (!evaluate(conf.htmlLabels) || true) { // eslint-disable-line
|
||||
const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
|
||||
for (let k = 0; k < labels.length; k++) {
|
||||
const label = labels[k];
|
||||
|
|
|
|||
|
|
@ -532,7 +532,7 @@ const _drawTextCandidateFunc = (function() {
|
|||
.attr('height', height);
|
||||
|
||||
const text = f
|
||||
.append('div')
|
||||
.append('xhtml:div')
|
||||
.style('display', 'table')
|
||||
.style('height', '100%')
|
||||
.style('width', '100%');
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { select } from 'd3';
|
|||
import stateDb from './stateDb';
|
||||
import state from './parser/stateDiagram';
|
||||
import { getConfig } from '../../config';
|
||||
|
||||
// import { evaluate } from '../common/common';
|
||||
import { render } from '../../dagre-wrapper/index.js';
|
||||
import { log } from '../../logger';
|
||||
import { configureSvgSize } from '../../utils';
|
||||
|
|
@ -295,22 +295,22 @@ export const draw = function(text, id) {
|
|||
svg.attr('viewBox', vBox);
|
||||
|
||||
// Add label rects for non html labels
|
||||
if (!conf.htmlLabels) {
|
||||
const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
|
||||
for (let k = 0; k < labels.length; k++) {
|
||||
const label = labels[k];
|
||||
// if (!evaluate(conf.htmlLabels) || true) {
|
||||
const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
|
||||
for (let k = 0; k < labels.length; k++) {
|
||||
const label = labels[k];
|
||||
|
||||
// Get dimensions of label
|
||||
const dim = label.getBBox();
|
||||
// Get dimensions of label
|
||||
const dim = label.getBBox();
|
||||
|
||||
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
||||
rect.setAttribute('rx', 0);
|
||||
rect.setAttribute('ry', 0);
|
||||
rect.setAttribute('width', dim.width);
|
||||
rect.setAttribute('height', dim.height);
|
||||
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
||||
rect.setAttribute('rx', 0);
|
||||
rect.setAttribute('ry', 0);
|
||||
rect.setAttribute('width', dim.width);
|
||||
rect.setAttribute('height', dim.height);
|
||||
|
||||
label.insertBefore(rect, label.firstChild);
|
||||
}
|
||||
label.insertBefore(rect, label.firstChild);
|
||||
// }
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -22,14 +22,15 @@ function drawActorLegend(diagram) {
|
|||
// Draw the actors
|
||||
let yPos = 60;
|
||||
Object.keys(actors).forEach(person => {
|
||||
const colour = actors[person];
|
||||
const colour = actors[person].color;
|
||||
|
||||
const circleData = {
|
||||
cx: 20,
|
||||
cy: yPos,
|
||||
r: 7,
|
||||
fill: colour,
|
||||
stroke: '#000'
|
||||
stroke: '#000',
|
||||
pos: actors[person].position
|
||||
};
|
||||
svgDraw.drawCircle(diagram, circleData);
|
||||
|
||||
|
|
@ -65,7 +66,10 @@ export const draw = function(text, id) {
|
|||
for (let member in actors) delete actors[member];
|
||||
let actorPos = 0;
|
||||
actorNames.forEach(actorName => {
|
||||
actors[actorName] = conf.actorColours[actorPos % conf.actorColours.length];
|
||||
actors[actorName] = {
|
||||
color: conf.actorColours[actorPos % conf.actorColours.length],
|
||||
position: actorPos
|
||||
};
|
||||
actorPos++;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const getStyles = options =>
|
|||
}
|
||||
|
||||
.face {
|
||||
fill: #FFF8DC;
|
||||
${options.faceColor ? `fill: ${options.faceColor}` : 'fill: #FFF8DC'};
|
||||
stroke: #999;
|
||||
}
|
||||
|
||||
|
|
@ -113,6 +113,27 @@ const getStyles = options =>
|
|||
.task-type-7, .section-type-7 {
|
||||
${options.fillType0 ? `fill: ${options.fillType7}` : ''};
|
||||
}
|
||||
|
||||
.actor-0 {
|
||||
${options.actor0 ? `fill: ${options.actor0}` : ''};
|
||||
}
|
||||
.actor-1 {
|
||||
${options.actor1 ? `fill: ${options.actor1}` : ''};
|
||||
}
|
||||
.actor-2 {
|
||||
${options.actor2 ? `fill: ${options.actor2}` : ''};
|
||||
}
|
||||
.actor-3 {
|
||||
${options.actor3 ? `fill: ${options.actor3}` : ''};
|
||||
}
|
||||
.actor-4 {
|
||||
${options.actor4 ? `fill: ${options.actor4}` : ''};
|
||||
}
|
||||
.actor-5 {
|
||||
${options.actor5 ? `fill: ${options.actor5}` : ''};
|
||||
}
|
||||
|
||||
}
|
||||
`;
|
||||
|
||||
export default getStyles;
|
||||
|
|
|
|||
|
|
@ -108,6 +108,7 @@ export const drawCircle = function(element, circleData) {
|
|||
const circleElement = element.append('circle');
|
||||
circleElement.attr('cx', circleData.cx);
|
||||
circleElement.attr('cy', circleData.cy);
|
||||
circleElement.attr('class', 'actor-' + circleData.pos);
|
||||
circleElement.attr('fill', circleData.fill);
|
||||
circleElement.attr('stroke', circleData.stroke);
|
||||
circleElement.attr('r', circleData.r);
|
||||
|
|
@ -247,7 +248,7 @@ export const drawTask = function(elem, task, conf) {
|
|||
|
||||
let xPos = task.x + 14;
|
||||
task.people.forEach(person => {
|
||||
const colour = task.actors[person];
|
||||
const colour = task.actors[person].color;
|
||||
|
||||
const circle = {
|
||||
cx: xPos,
|
||||
|
|
@ -255,7 +256,8 @@ export const drawTask = function(elem, task, conf) {
|
|||
r: 7,
|
||||
fill: colour,
|
||||
stroke: '#000',
|
||||
title: person
|
||||
title: person,
|
||||
pos: task.actors[person].position
|
||||
};
|
||||
|
||||
drawCircle(g, circle);
|
||||
|
|
@ -370,7 +372,7 @@ const _drawTextCandidateFunc = (function() {
|
|||
.attr('position', 'fixed');
|
||||
|
||||
const text = f
|
||||
.append('div')
|
||||
.append('xhtml:div')
|
||||
.style('display', 'table')
|
||||
.style('height', '100%')
|
||||
.style('width', '100%');
|
||||
|
|
|
|||
|
|
@ -136,7 +136,8 @@ const initialize = function(config) {
|
|||
mermaid.startOnLoad = config.mermaid.startOnLoad;
|
||||
}
|
||||
if (typeof config.mermaid.htmlLabels !== 'undefined') {
|
||||
mermaid.htmlLabels = config.mermaid.htmlLabels;
|
||||
mermaid.htmlLabels =
|
||||
config.mermaid.htmlLabels === 'false' || config.mermaid.htmlLabels === false ? false : true;
|
||||
}
|
||||
}
|
||||
mermaidAPI.initialize(config);
|
||||
|
|
|
|||
|
|
@ -297,8 +297,9 @@ const render = function(id, _txt, cb, container) {
|
|||
// classDef
|
||||
if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
|
||||
const classes = flowRenderer.getClasses(txt);
|
||||
const htmlLabels = cnf.htmlLabels || cnf.flowchart.htmlLabels;
|
||||
for (const className in classes) {
|
||||
if (cnf.htmlLabels || cnf.flowchart.htmlLabels) {
|
||||
if (htmlLabels) {
|
||||
userStyles += `\n.${className} > * { ${classes[className].styles.join(
|
||||
' !important; '
|
||||
)} !important; }`;
|
||||
|
|
@ -306,7 +307,6 @@ const render = function(id, _txt, cb, container) {
|
|||
' !important; '
|
||||
)} !important; }`;
|
||||
} else {
|
||||
// console.log('classes[className].styles', classes[className].styles, cnf.htmlLabels);
|
||||
userStyles += `\n.${className} path { ${classes[className].styles.join(
|
||||
' !important; '
|
||||
)} !important; }`;
|
||||
|
|
|
|||
Loading…
Reference in New Issue