mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-02 05:39:38 +02:00
Merge branch 'develop' into sidv/esbuildV10
* develop: (840 commits) use default export in `error` diagram create `ParserDefinition` type standardized `error` diagram' style: format packages/mermaid/src/config.type.ts build(types): use prettier conf on config.types.ts Syntax Update CONTRIBUTING.md fix!(deps): fix zenuml style leakage. update @zenuml/core to ^3.0.6 to fix the style leakage. Update selectSvgElement.ts create `Group` type Add specialChars in textNoTagsToken, alphaNumToken Return Unicode Text to idStringToken definition Add underscore to unit test on special Chars Revert to old docs concerning quotations marks in string Refactor unit tests and remove repetition Correct idStringToken definition to include all individual special tokens Add unit tests for node ids with special Chars Create lychee.toml create `selectSvgElement` change `svgElem` to `SVG` in `configureSvgSize` add `configureSvgSize` in infoRenderer ...
This commit is contained in:
Sidharth Vinod
@@ -1,4 +1,5 @@
|
||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||
// TODO: this file should be testing the ./mermaid.core.mjs file, as that's the file listed in the package.json file that users will use
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
|
||||
let code = `flowchart LR
|
||||
Power_Supply --> Transmitter_A
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>info below</h1>
|
||||
<pre class="mermaid">
|
||||
info
|
||||
</pre>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
// themeCSS: '.node rect { fill: red; }',
|
||||
logLevel: 3,
|
||||
flowchart: { curve: 'linear' },
|
||||
gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50 },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -42,368 +42,86 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
flowchart LR
|
||||
subgraph one
|
||||
direction LR
|
||||
A[myClass1] --> B[default]
|
||||
subgraph two
|
||||
direction BT
|
||||
C[myClass2] --> D[default]
|
||||
end
|
||||
end
|
||||
<pre class="mermaid" style="width: 50%">
|
||||
%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart LR
|
||||
b("`The dog in **the** hog.(1).. a a a a *very long text* about it
|
||||
Word!
|
||||
|
||||
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words.`") --apa--> c
|
||||
|
||||
</pre
|
||||
>
|
||||
<pre class="mermaid" style="width: 50%">
|
||||
classDiagram-v2
|
||||
|
||||
classA -- classB : Inheritance
|
||||
classA -- classC : link
|
||||
classC -- classD : link
|
||||
classB -- classD
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
flowchart LR
|
||||
classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
|
||||
classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
|
||||
classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px;;
|
||||
|
||||
O0("Joe")
|
||||
class O0 aPID;
|
||||
|
||||
O1("Person")
|
||||
class O1 crm;
|
||||
O0 -- has type -->O1["Person"]
|
||||
|
||||
O2("aat:300411314")
|
||||
class O2 type;
|
||||
click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line."
|
||||
O0 -- has type -->O2["Bug"]
|
||||
click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
|
||||
<pre class="mermaid" style="width: 50%">
|
||||
sequenceDiagram
|
||||
Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
|
||||
loop Loopy
|
||||
Bob->>Alice: Pasten
|
||||
end
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
flowchart TD
|
||||
subgraph test
|
||||
direction TB
|
||||
subgraph test2
|
||||
direction LR
|
||||
F --> D
|
||||
end
|
||||
subgraph test3
|
||||
direction TB
|
||||
G --> H
|
||||
end
|
||||
end
|
||||
<pre class="mermaid" style="width: 50%">
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart LR
|
||||
b("`The dog in **the** hog.(1)
|
||||
NL`") --"`1o **bold**`"--> c[new strings svg labels]
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
flowchart TD
|
||||
|
||||
release-branch[Create Release Branch]:::relClass
|
||||
develop-branch[Update Develop Branch]:::relClass
|
||||
github-release-draft[GitHub Release Draft]:::relClass
|
||||
trigger-pipeline[Trigger Jenkins pipeline]:::fixClass
|
||||
github-release[GitHub Release]:::postClass
|
||||
|
||||
build-ready --> release-branch
|
||||
build-ready --> develop-branch
|
||||
release-branch --> jenkins-release-build
|
||||
jenkins-release-build --> github-release-draft
|
||||
jenkins-release-build --> install-release
|
||||
install-release --> verify-release
|
||||
jenkins-release-build --> announce
|
||||
github-release-draft --> github-release
|
||||
verify-release --> verify-check
|
||||
verify-check -- Yes --> github-release
|
||||
verify-check -- No --> release-fix
|
||||
release-fix --> release-branch-pr
|
||||
verify-check -- No --> delete-artifacts
|
||||
release-branch-pr --> trigger-pipeline
|
||||
delete-artifacts --> trigger-pipeline
|
||||
trigger-pipeline --> jenkins-release-build
|
||||
|
||||
|
||||
<pre class="mermaid" style="width: 50%">
|
||||
%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart LR
|
||||
b("`The dog in **the** hog.(1)
|
||||
NL`") --"`1o **bold**`"--> c[new strings html labels]
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
flowchart LR
|
||||
a["<strong>Haiya</strong>"]===>b
|
||||
<pre class="mermaid" style="width: 50%">
|
||||
%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart LR
|
||||
b("The dog in the hog.(1)\nNL") --"1o bold"--> c[old strings svg labels]
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
flowchart TD
|
||||
A --> B
|
||||
A --> C
|
||||
B --> C
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
flowchart TD
|
||||
A([stadium shape test])
|
||||
A -->|Get money| B([Go shopping])
|
||||
B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
|
||||
C -->|One| D([Laptop])
|
||||
C -->|Two| E([iPhone])
|
||||
C -->|Three| F([Car<br/>wroom wroom])
|
||||
click A "index.html#link-clicked" "link test"
|
||||
click B testClick "click test"
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
sequenceDiagram
|
||||
title: My Sequence Diagram Title
|
||||
accTitle: My Acc Sequence Diagram
|
||||
accDescr: My Sequence Diagram Description
|
||||
|
||||
Alice->>John: Hello John, how are you?
|
||||
John-->>Alice: Great!
|
||||
Alice-)John: See you later!
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
graph TD
|
||||
A -->|000| B
|
||||
B -->|111| C
|
||||
|
||||
linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
journey
|
||||
accTitle: My User Journey Diagram
|
||||
accDescr: My User Journey Diagram Description
|
||||
|
||||
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
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
info
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
requirementDiagram
|
||||
accTitle: My req Diagram
|
||||
accDescr: My req Diagram Description
|
||||
|
||||
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
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
excludes weekends
|
||||
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
|
||||
|
||||
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
|
||||
Functionality added :milestone, 2014-01-25, 0d
|
||||
|
||||
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
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
stateDiagram
|
||||
state Active {
|
||||
Idle
|
||||
}
|
||||
Inactive --> Idle: ACT
|
||||
Active --> Active: LOG
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
flowchart TB
|
||||
accTitle: My flowchart
|
||||
accDescr: My flowchart Description
|
||||
subgraph One
|
||||
a1-->a2-->a3
|
||||
end
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
sequenceDiagram
|
||||
A ->> B: 1
|
||||
rect rgb(204, 0, 102)
|
||||
break yes
|
||||
rect rgb(0, 204, 204)
|
||||
C ->> C: 0
|
||||
end
|
||||
end
|
||||
end
|
||||
B ->> A: Return
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
classDiagram
|
||||
accTitle: My class diagram
|
||||
accDescr: My class diagram Description
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
Class09 --> C2 : Where am i?
|
||||
Class09 --* C3
|
||||
Class09 --|> Class07
|
||||
Class07 : equals()
|
||||
Class07 : Object[] elementData
|
||||
Class01 : size()
|
||||
Class01 : int chimp
|
||||
Class01 : int gorilla
|
||||
class Class10 {
|
||||
int id
|
||||
size()
|
||||
}
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
%%{init: {'config': {'wrap': true }}}%%
|
||||
sequenceDiagram
|
||||
participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
|
||||
A->>Bob: Hola
|
||||
Bob-->A: Pasten !
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
gitGraph
|
||||
commit id: "ZERO"
|
||||
branch develop
|
||||
commit id:"A"
|
||||
checkout main
|
||||
commit id:"ONE"
|
||||
checkout develop
|
||||
commit id:"B"
|
||||
branch featureA
|
||||
commit id:"FIX"
|
||||
commit id: "FIX-2"
|
||||
checkout main
|
||||
commit id:"TWO"
|
||||
cherry-pick id:"A"
|
||||
commit id:"THREE"
|
||||
cherry-pick id:"FIX"
|
||||
checkout develop
|
||||
commit id:"C"
|
||||
merge featureA
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
flowchart TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
C -->|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
classDiagram
|
||||
Animal "1" <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <--o 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()
|
||||
}
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
</pre>
|
||||
|
||||
<!-- <script src="./mermaid.js"></script> -->
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
<script type="module">
|
||||
// import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||
// import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
// await mermaid.registerExternalDiagrams([example]);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
maxTextSize: 900000,
|
||||
// theme: 'forest',
|
||||
startOnLoad: true,
|
||||
securityLevel: 'loose',
|
||||
logLevel: 0,
|
||||
fontFamily: 'courier',
|
||||
flowchart: {
|
||||
// curve: 'curveLinear',
|
||||
useMaxWidth: true,
|
||||
htmlLabels: false,
|
||||
fontFamily: 'courier',
|
||||
// defaultRenderer: 'elk',
|
||||
useMaxWidth: false,
|
||||
// htmlLabels: false,
|
||||
htmlLabels: true,
|
||||
},
|
||||
lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
|
||||
// htmlLabels: false,
|
||||
gantt: {
|
||||
useMaxWidth: false,
|
||||
},
|
||||
sequence: {
|
||||
wrap: true,
|
||||
},
|
||||
useMaxWidth: false,
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
|
||||
function clickByFlow(elemName) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Flow';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
|
||||
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
|
||||
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
|
||||
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -29,9 +29,9 @@
|
||||
}
|
||||
.mermaid svg {
|
||||
/* font-size: 18px !important; */
|
||||
background-color: #eee;
|
||||
background-image: radial-gradient(#fff 1%, transparent 11%),
|
||||
radial-gradient(#fff 1%, transparent 11%);
|
||||
background-color: #efefef;
|
||||
background-image: radial-gradient(#fff 51%, transparent 91%),
|
||||
radial-gradient(#fff 51%, transparent 91%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-repeat: repeat;
|
||||
@@ -51,27 +51,109 @@
|
||||
font-family: monospace;
|
||||
font-size: 72px;
|
||||
}
|
||||
/* tspan {
|
||||
font-size: 6px !important;
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid">
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||
graph BT
|
||||
a{The cat in the hat} -- 1o --> b
|
||||
a -- 2o --> c
|
||||
a -- 3o --> d
|
||||
g --2i--> a
|
||||
d --1i--> a
|
||||
h --3i -->a
|
||||
b --> d(The dog in the hog)
|
||||
c --> d
|
||||
---
|
||||
title: Simple flowchart with invisible edges
|
||||
---
|
||||
flowchart TD
|
||||
A ~~~ B
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*] </pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart RL
|
||||
subgraph "`one`"
|
||||
a1 -- l1 --> a2
|
||||
a1 -- l2 --> a2
|
||||
end
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart-elk TB
|
||||
a --> b
|
||||
a --> c
|
||||
b --> d
|
||||
c --> d
|
||||
flowchart RL
|
||||
subgraph "`one`"
|
||||
a1 -- l1 --> a2
|
||||
a1 -- l2 --> a2
|
||||
end
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart
|
||||
id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart LR
|
||||
A[A text that needs to be wrapped wraps to another line]
|
||||
B[A text that needs to be<br/>wrapped wraps to another line]
|
||||
C["`A text that needs to be wrapped to another line`"]</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart LR
|
||||
C["`A text
|
||||
that needs
|
||||
to be wrapped
|
||||
in another
|
||||
way`"]
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
classDiagram-v2
|
||||
note "I love this diagram!\nDo you love it?"
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
stateDiagram-v2
|
||||
State1: The state with a note with minus - and plus + in it
|
||||
note left of State1
|
||||
Important information! You can write
|
||||
notes with . and in them.
|
||||
end note </pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
mindmap
|
||||
root
|
||||
Child3(A node with an icon and with a long text that wraps to keep the node size in check)
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
%%{init: {"theme": "forest"} }%%
|
||||
mindmap
|
||||
id1[**Start2**<br/>end]
|
||||
id2[**Start2**<br />end]
|
||||
%% Another comment
|
||||
id3[**Start2**<br>end] %% Comment
|
||||
id4[**Start2**<br >end<br >the very end]
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
mindmap
|
||||
id1["`**Start2**
|
||||
second line 😎 with long text that is wrapping to the next line`"]
|
||||
id2["`Child **with bold** text`"]
|
||||
id3["`Children of which some
|
||||
is using *italic type of* text`"]
|
||||
id4[Child]
|
||||
id5["`Child
|
||||
Row
|
||||
and another
|
||||
`"]
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
mindmap
|
||||
id1("`**Root**`"]
|
||||
id2["`A formatted text... with **bold** and *italics*`"]
|
||||
id3[Regular labels works as usual]
|
||||
id4["`Emojis and unicode works too: 🤓
|
||||
शान्तिः سلام 和平 `"]
|
||||
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||
@@ -89,7 +171,7 @@ flowchart TB
|
||||
rom --> core2
|
||||
end
|
||||
|
||||
subgraph amd[AMD Latte GPU]
|
||||
subgraph amd["`**AMD** Latte GPU`"]
|
||||
mem[Memory & I/O Bridge]
|
||||
dram[DRAM Controller]
|
||||
edram[32 MB EDRAM MEM1]
|
||||
@@ -128,6 +210,62 @@ flowchart TB
|
||||
rtc{{rtc}}
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
|
||||
flowchart TB
|
||||
%% I could not figure out how to use double quotes in labels in Mermaid
|
||||
subgraph ibm[IBM Espresso CPU]
|
||||
core0[IBM PowerPC Broadway Core 0]
|
||||
core1[IBM PowerPC Broadway Core 1]
|
||||
core2[IBM PowerPC Broadway Core 2]
|
||||
|
||||
rom[16 KB ROM]
|
||||
|
||||
core0 --- core2
|
||||
|
||||
rom --> core2
|
||||
end
|
||||
|
||||
subgraph amd["`**AMD** Latte GPU`"]
|
||||
mem[Memory & I/O Bridge]
|
||||
dram[DRAM Controller]
|
||||
edram[32 MB EDRAM MEM1]
|
||||
rom[512 B SEEPROM]
|
||||
|
||||
sata[SATA IF]
|
||||
exi[EXI]
|
||||
|
||||
subgraph gx[GX]
|
||||
sram[3 MB 1T-SRAM]
|
||||
end
|
||||
|
||||
radeon[AMD Radeon R7xx GX2]
|
||||
|
||||
mem --- gx
|
||||
mem --- radeon
|
||||
|
||||
rom --- mem
|
||||
|
||||
mem --- sata
|
||||
mem --- exi
|
||||
|
||||
dram --- sata
|
||||
dram --- exi
|
||||
end
|
||||
|
||||
ddr3[2 GB DDR3 RAM MEM2]
|
||||
|
||||
mem --- ddr3
|
||||
dram --- ddr3
|
||||
edram --- ddr3
|
||||
|
||||
core1 --- mem
|
||||
|
||||
exi --- rtc
|
||||
rtc{{rtc}}
|
||||
</pre
|
||||
>
|
||||
|
||||
<br />
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart TB
|
||||
@@ -263,25 +401,37 @@ mindmap
|
||||
|
||||
<script type="module">
|
||||
// import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||
import example from '../../packages/mermaid-example-diagram/src/detector';
|
||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||
await mermaid.registerExternalDiagrams([example]);
|
||||
// import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
// await mermaid.registerExternalDiagrams([example]);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// mermaid.initialize({
|
||||
// // theme: 'forest',
|
||||
// startOnLoad: true,
|
||||
// logLevel: 0,
|
||||
// flowchart: {
|
||||
// // defaultRenderer: 'elk',
|
||||
// useMaxWidth: false,
|
||||
// // htmlLabels: false,
|
||||
// htmlLabels: true,
|
||||
// },
|
||||
// // htmlLabels: false,
|
||||
// gantt: {
|
||||
// useMaxWidth: false,
|
||||
// },
|
||||
// useMaxWidth: false,
|
||||
// });
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
startOnLoad: true,
|
||||
logLevel: 5,
|
||||
flowchart: {
|
||||
// defaultRenderer: 'elk',
|
||||
useMaxWidth: false,
|
||||
htmlLabels: true,
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
fontFamily: 'courier',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
messageFontFamily: 'courier',
|
||||
},
|
||||
gantt: {
|
||||
useMaxWidth: false,
|
||||
},
|
||||
useMaxWidth: false,
|
||||
fontSize: 16,
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
|
||||
<script type="module">
|
||||
// import mermaid from './mermaid.esm.mjs';
|
||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||
import mermaid from '../../packages/mermaid/dist/mermaid.esm.mjs';
|
||||
// import mermaidMindmap from './mermaid-mindmap.esm.mjs';
|
||||
|
||||
// import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
let mermaid2;
|
||||
let externalExample;
|
||||
import mermaid2 from './mermaid.esm.mjs';
|
||||
import externalExample from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
|
||||
import zenUml from '../../packages/mermaid-zenuml/dist/mermaid-zenuml.core.mjs';
|
||||
|
||||
function b64ToUtf8(str) {
|
||||
return decodeURIComponent(escape(window.atob(str)));
|
||||
@@ -44,10 +45,9 @@ const contentLoaded = async function () {
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
|
||||
await mermaid2.registerExternalDiagrams([externalExample]);
|
||||
await mermaid2.registerExternalDiagrams([externalExample, zenUml]);
|
||||
mermaid2.initialize(graphObj.mermaid);
|
||||
await mermaid2.run();
|
||||
markRendered();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -123,7 +123,6 @@ const contentLoadedApi = async function () {
|
||||
bindFunctions(div);
|
||||
}
|
||||
}
|
||||
markRendered();
|
||||
};
|
||||
|
||||
if (typeof document !== 'undefined') {
|
||||
@@ -135,10 +134,10 @@ if (typeof document !== 'undefined') {
|
||||
function () {
|
||||
if (this.location.href.match('xss.html')) {
|
||||
this.console.log('Using api');
|
||||
void contentLoadedApi();
|
||||
void contentLoadedApi().finally(markRendered);
|
||||
} else {
|
||||
this.console.log('Not using api');
|
||||
void contentLoaded();
|
||||
void contentLoaded().finally(markRendered);
|
||||
}
|
||||
},
|
||||
false
|
||||
|
||||
85
cypress/platform/xss23-css.html
Normal file
85
cypress/platform/xss23-css.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<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="graph-div"></div>
|
||||
<div id="res" class=""></div>
|
||||
</div>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'base',
|
||||
startOnLoad: false,
|
||||
flowcharts: { htmlLabels: true },
|
||||
});
|
||||
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 Succeeded');
|
||||
}
|
||||
|
||||
let diagram = `graph TD
|
||||
A[["a marker-end=#quot;url(<s title='#<style>*{background:red}</style>'>b"]]
|
||||
`;
|
||||
const el = document.querySelector('#graph-div');
|
||||
console.log(diagram);
|
||||
const { svg } = await mermaid.render('graph-div', diagram);
|
||||
document.querySelector('#res').innerHTML = svg;
|
||||
window.rendered = true;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user