From 4dd3d3bc7604afe970a9737076f2468aa2ebf36e Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 8 Jun 2022 20:17:31 +0200 Subject: [PATCH] --- cypress/platform/knsv.html | 1 + cypress/platform/knsv3.html | 350 ++++++++++++---------- src/dagre-wrapper/clusters.js | 2 +- src/diagrams/class/classRenderer-v2.js | 35 +-- src/diagrams/flowchart/flowRenderer-v2.js | 18 +- src/diagrams/flowchart/flowRenderer.js | 21 +- src/utils.js | 43 +++ 7 files changed, 242 insertions(+), 228 deletions(-) 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..f5a3cf1f7 100644 --- a/cypress/platform/knsv3.html +++ b/cypress/platform/knsv3.html @@ -11,196 +11,224 @@ 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 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; -
-
-flowchart TB - subgraph S1 - sub1 -->sub2 - end - subgraph S2 - sub4 - end - S1 --> S2 - sub1 --> sub4 +
+flowchart TB;a[APA];
-
-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 +
+graph TD + work --> sleep + sleep --> work + eat --> sleep + work --> eat
-
-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 -
-
+ 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 + + 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[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 + a["Haiya"]---->b +
+
+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() + }
- -