diff --git a/CHANGELOG.md b/CHANGELOG.md index 76496f076..db6be9064 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,7 +23,7 @@ - Missing fontawesome icon support [\#830](https://github.com/knsv/mermaid/issues/830) - Docs for integration with wiki.js? [\#829](https://github.com/knsv/mermaid/issues/829) - Is this project still maintained? [\#826](https://github.com/knsv/mermaid/issues/826) -- typroa [\#823](https://github.com/knsv/mermaid/issues/823) +- typora [\#823](https://github.com/knsv/mermaid/issues/823) - Maintain the order of the nodes in Flowchart [\#815](https://github.com/knsv/mermaid/issues/815) - Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814) - How load mermaidApi notejs electron [\#813](https://github.com/knsv/mermaid/issues/813) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 738daab23..c92f8d573 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -114,7 +114,7 @@ Finally, if it is not in the documentation, no one will know about it and then * The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the _navbar.md. -The changes in master is reflected in http://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/ +The changes in master is reflected in https://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/ ## Last words diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index b109c4e7e..4dda2c16e 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -126,7 +126,83 @@ describe('Git Graph diagram', () => { branch branch8 branch branch9 checkout branch1 - commit + commit id: "1" + `, + {} + ); + }); + it('9: should render a simple gitgraph with rotated labels', () => { + imgSnapshotTest( + `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': { + 'rotateCommitLabel': true + } } }%% + gitGraph + commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828" + commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e" + commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e" + commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d" + `, + {} + ); + }); + it('10: should render a simple gitgraph with horizontal labels', () => { + imgSnapshotTest( + `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': { + 'rotateCommitLabel': false + } } }%% + gitGraph + commit id: "Alpha" + commit id: "Beta" + commit id: "Gamma" + commit id: "Delta" + `, + {} + ); + }); + it('11: should render a simple gitgraph with cherry pick commit', () => { + imgSnapshotTest( + ` + gitGraph + commit id: "ZERO" + branch develop + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + checkout main + commit id:"TWO" + cherry-pick id:"A" + commit id:"THREE" + checkout develop + commit id:"C" + `, + {} + ); + }); + + it('11: should render a simple gitgraph with two cherry pick commit', () => { + imgSnapshotTest( + ` + 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 `, {} ); diff --git a/cypress/platform/class.html b/cypress/platform/class.html index ae4e18a5b..0c1fcebb3 100644 --- a/cypress/platform/class.html +++ b/cypress/platform/class.html @@ -78,7 +78,7 @@ a_a --> c --> d_d --> c_c classDef apa fill:#f9f,stroke:#333,stroke-width:4px; class a_a apa; - click a_a "http://www.aftonbladet.se" "apa" + click a_a "https://www.aftonbladet.se" "apa" diff --git a/cypress/platform/current.html b/cypress/platform/current.html index fb90901aa..575874605 100644 --- a/cypress/platform/current.html +++ b/cypress/platform/current.html @@ -22,16 +22,16 @@

info below

-
+
flowchart BT - subgraph two - b1 - end - subgraph three - c1-->c2 - end - c1 --apa apa apa--> b1 - two --> c2 + subgraph S1 + sub1 -->sub2 + end + subgraph S2 + sub4 + end + S1 --> S2 + sub1 --> sub4
sequenceDiagram @@ -163,7 +163,7 @@ _one --> b // arrowMarkerAbsolute: true, // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', logLevel: 0, - flowchart: { curve: 'cardinal', htmlLabels: true }, + flowchart: { curve: 'cardinal', htmlLabels: false }, // gantt: { axisFormat: '%m/%d/%Y' }, sequence: { actorMargin: 50, showSequenceNumbers: true }, // sequenceDiagram: { actorMargin: 300 } // deprecated diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 05a316151..9f8472eb0 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -230,6 +230,7 @@ class Class10 { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true, + useMaxWidth: false, // defaultRenderer: 'dagre-d3', }, class: { diff --git a/cypress/platform/knsv3.html b/cypress/platform/knsv3.html index ca839d83f..f2c264de8 100644 --- a/cypress/platform/knsv3.html +++ b/cypress/platform/knsv3.html @@ -11,52 +11,207 @@ body { /* background: rgb(221, 208, 208); */ /* background:#333; */ - font-family: 'Arial'; + font-family: 'Courier New', Courier, monospace; /* font-size: 18px !important; */ } h1 { color: grey;} .mermaid2 { display: none; } - .mermaid svg { + .mermaid { + border: 1px solid red; + font-family: 'Courier New', Courier, monospace; /* font-size: 18px !important; */ }
info below
-
+
-%%{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" +flowchart TB;subgraph "number as labels";1;end;
-
+
+flowchart TB;a[APA]; +
+
+graph TD + work --> sleep + sleep --> work + eat --> sleep + work --> eat +
+
flowchart TD - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C - subgraph T ["Test"] - A - B - C - end + work --> sleep + sleep --> work + eat --> sleep + work --> eat +
+
+ graph TB + A + B + subgraph foo[Foo SubGraph] + C + D + end + subgraph bar[Bar SubGraph] + E + F + end + G - 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; + A-->B + B-->C + C-->D + B-->D + D-->E + E-->A + E-->F + F-->D + F-->G + B-->G + G-->D + + style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred + style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue +
+
+ graph TB +%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% + A + B + subgraph foo[Foo SubGraph] + C + D + end + subgraph bar[Bar SubGraph] + E + F + end + G + + A-->B + B-->C + C-->D + B-->D + D-->E + E-->A + E-->F + F-->D + F-->G + B-->G + G-->D + + style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred + style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue +
+
+ graph TD + A[Christmas] ==> D + A[Christmas] -->|Get money| B(Go shopping) + A[Christmas] ==> C +
+
+ graph TD +%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% + A[Christmas] ==> D + A[Christmas] -->|Get money| B(Go shopping) + A[Christmas] ==> C +
+
+ flowchart TD + A[Christmas] ==> D + A[Christmas] -->|Get money| B(Go shopping) + A[Christmas] ==> C +
+
+ flowchart TD +%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% + A[Christmas] ==> D + A[Christmas] -->|Get money| B(Go shopping) + A[Christmas] ==> C +
+
+flowchart LR + a["Haiya"]---->b
-
-flowchart TB +
+flowchart LR +%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% + a["Haiya"]---->b +
+
+ flowchart TD + A[Christmas] ==> D + A[Christmas] -->|Get money| B(Go shopping) + A[Christmas] ==> C +
+
+ flowchart TD +%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% + A[Christmas] ==> D + A[Christmas] -->|Get money| B(Go shopping) + A[Christmas] ==> C +
+
+ %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% +classDiagram-v2 + Class01 <|-- AveryLongClass : Cool + <<interface>> Class01 + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class12 <|.. Class08 + Class11 ..>Class12 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class01 : -int privateChimp + Class01 : +int publicGorilla + Class01 : #int protectedMarmoset + Class08 <--> C2: Cool label + class Class10 { + <<service>> + int id + test() + } +
+
+classDiagram-v2 + Class01 <|-- AveryLongClass : Cool + <<interface>> Class01 + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class12 <|.. Class08 + Class11 ..>Class12 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class01 : -int privateChimp + Class01 : +int publicGorilla + Class01 : #int protectedMarmoset + Class08 <--> C2: Cool label + class Class10 { + <<service>> + int id + test() + } +
+
+flowchart BT subgraph S1 sub1 -->sub2 end @@ -66,141 +221,25 @@ flowchart TB S1 --> S2 sub1 --> sub4
-
-flowchart TB - c1-->a2 - subgraph one - a1-->a2 - end - subgraph two - b1-->b2 - end - subgraph three - c1-->c2 - end - one --> two - three --> two - two --> c2 -
-
-stateDiagram-v2 -state S1 { -sub1 -->sub2 -} -state S2 { - sub4 -} -S1 --> S2 -sub1 --> sub4 - -
-
- 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 -
-
-flowchart LR - classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff - Lorem --> Ipsum --> Dolor - class Lorem,Dolor dark -
-
-%%{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 -
-
-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 -
- - +