From 7da85b9005c903179c8d0d9d870aa29ea7df6772 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 23 May 2024 11:59:31 +0200 Subject: [PATCH] Tweaking spacings for elk and confurinable network placement strategy --- cypress/platform/knsv2.html | 506 +++--------------- cypress/platform/state-refactor.html | 5 +- packages/mermaid-layout-elk/src/render.ts | 20 +- packages/mermaid/src/config.type.ts | 7 +- .../mermaid/src/diagrams/state/stateDb.js | 6 +- .../mermaid/src/schemas/config.schema.yaml | 14 +- 6 files changed, 117 insertions(+), 441 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index ce59a7bc2..6ce618046 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -76,13 +76,89 @@ 
+%%{
+  init: {
+  "theme":"base",
+  "fontFamily": "Kalam",
+  "themeVariables": {
+    "background": "#FFFFFF",
+    "primaryColor": "#7bdfa7",
+    "primaryTextColor": "#3c3c3b",
+    "secondaryColor": "#642470",
+    "secondaryTextColor": "#3c3c3b",
+    "tertiaryColor": "#1c736D",
+    "tertiaryTextColor": "#3c3c3b",
+    "noteBkgColor": "#9fd8ef",
+    "loopTextColor": "#636362",
+    "labelBoxBkgColor": "#642470",
+    "labelBoxBorderColor": "#642470",
+    "labelTextColor": "#d4d4d4",
+    "signalTextColor": "#636362",
+    "signalColor": "#642470"
+  }
+  }
+}%%
+sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!
+
+ 
+%%{
+  init: {
+    "theme":"base",
+  "fontFamily": "Forth Bold",
+  "themeVariables": {
+    "background": "#FFFFFF",
+    "primaryColor": "#7bdfa7",
+    "primaryTextColor": "#3c3c3b",
+    "secondaryColor": "#642470",
+    "secondaryTextColor": "#3c3c3b",
+    "tertiaryColor": "#1c736D",
+    "tertiaryTextColor": "#3c3c3b",
+    "noteBkgColor": "#9fd8ef",
+    "loopTextColor": "#636362",
+    "labelBoxBkgColor": "#642470",
+    "labelBoxBorderColor": "#642470",
+    "labelTextColor": "#d4d4d4",
+    "signalTextColor": "#636362",
+    "signalColor": "#642470"
+  }
+  }
+}%%
+sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!
+
+ + 
       %%{init: {"layout": "elk", "mergeEdges": true} }%%
 stateDiagram
   direction TB
   T00 --> T0
+  T00 --> T1
       
+      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "NETWORK_SIMPLEX"} }%%
+stateDiagram
+  State T0 {
+    direction LR
+    A --> B
+  }
+  State T1 {
+    [*] --> NumLockOff
+    NumLockOff --> NumLockOn : EvNumLockPressed
+    NumLockOn --> NumLockOff : EvNumLockPressed
+  }
+
+ 
       %%{init: {"layout": "dagre", "mergeEdges": true} }%%
 stateDiagram
   direction TB
@@ -91,7 +167,7 @@ stateDiagram
   }
- 
+    
       %%{init: {"layout": "dagre", "mergeEdges": true} }%%
 stateDiagram
 State T1 {
@@ -101,7 +177,7 @@ State T1 {
     }
       

-    
+    
       %%{init: {"layout": "elk", "mergeEdges": true} }%%
 stateDiagram
   direction TB
@@ -110,7 +186,7 @@ stateDiagram
   }
       

-    
+    
       %%{init: {"layout": "elk", "mergeEdges": true} }%%
 stateDiagram
 State T1 {
@@ -161,439 +237,25 @@ stateDiagram-v2
     %% Outer --> Inner
       

-    
-stateDiagram
-   direction TB
-
-   accTitle: This is the accessible title
-   accDescr: This is an accessible description
-
-   classDef notMoving fill:white,color:#000
-   classDef movement font-style:italic;
-   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
-
-   [*] --> Still:::notMoving
-   Still --> [*]
-   Still --> Moving:::movement
-   Moving --> Still
-   Moving --> Crash:::movement
-   Crash:::badBadEvent --> [*]
-
-  

-    
-      %%{init: {"look": "classic"} }%%
-   stateDiagram-v2
-     TN3: The state with a note
-        note right of TN3
-            Important information! You can write
-            notes.
-        end note
-        TN3 --> TN4
-        note left of TN4 : This is the note to the left.
-          

-    
-block-beta
-    A["square"]
-    B("rounded")
-    C(("circle"))
-    

-    
-block-beta
-    A>"rect_left_inv_arrow"]
-    B{"diamond"}
-    C{{"hexagon"}}
-    

-    
-block-beta
-    A(["stadium"])
-    

-    
-block-beta
-    %% A[["subroutine"]]
-    %% B[("cylinder")]
-    C>"surprise"]
-    

-    
-block-beta
-    A[/"lean right"/]
-    B[\"lean left"\]
-    C[/"trapezoid"\]
-    D[\"trapezoid"/]
-    

-
-    
-flowchart
-      B
-      style B fill:#f9F,stroke:#333,stroke-width:4px
-    

-
-    
-      flowchart LR
-      a1 -- apa --> b1
-    

-
-    
-flowchart RL
-    subgraph "`one`"
-      a1 -- l1 --> a2
-      a1 -- l2 --> a2
-    end
-    

-    
-flowchart RL
-    subgraph "`one`"
-      a1 -- l1 --> a2
-      a1 -- l2 --> a2
-    end
-    

-    
-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`"]

-    
-flowchart LR
-    A[A text that needs to be wrapped wraps to another line]
-    B[A text that needs to be
wrapped wraps to another line]
-    C["`A text that needs to be wrapped to another line`"]

-    
-flowchart LR
-    C["`A text
-        that needs
-        to be wrapped
-        in another
-        way`"]
-  

-    
-      classDiagram-v2
-        note "I love this diagram!\nDo you love it?"
-    

-    
-    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    

-    
-mindmap
-root
-  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
-

-    
-      %%{init: {"theme": "forest"} }%%
-mindmap
-    id1[**Start2**
end]
-      id2[**Start2**
end]
-      %% Another comment
-      id3[**Start2**
end] %% Comment
-      id4[**Start2**
end
the very end]
-    

-    
-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
-      `"]
-    

-    
-mindmap
-    id1("`**Root**`"]
-      id2["`A formatted text... with **bold** and *italics*`"]
-      id3[Regular labels works as usual]
-      id4["`Emojis and unicode works too: 🤓
-      शान्तिः سلام  和平 `"]
-
-    

-    
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-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}}
-

-    
-%%{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}}
-

-
-    

-    
-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}}
-

-    

-     
-    
-      flowchart LR
-  B1 --be be--x B2
-  B1 --bo bo--o B3
-  subgraph Ugge
-      B2
-      B3
-      subgraph inner
-          B4
-          B5
-      end
-      subgraph inner2
-        subgraph deeper
-          C4
-          C5
-        end
-        C6
-      end
-
-      B4 --> C4
-
-      B3 -- X --> B4
-      B2 --> inner
-
-      C4 --> C5
-  end
-
-  subgraph outer
-      B6
-  end
-  B6 --> B5
-  

-    
-sequenceDiagram
-    Customer->>+Stripe: Makes a payment request
-    Stripe->>+Bank: Forwards the payment request to the bank
-    Bank->>+Customer: Asks for authorization
-    Customer->>+Bank: Provides authorization
-    Bank->>+Stripe: Sends a response with payment details
-    Stripe->>+Merchant: Sends a notification of payment receipt
-    Merchant->>+Stripe: Confirms the payment
-    Stripe->>+Customer: Sends a confirmation of payment
-    Customer->>+Merchant: Receives goods or services
-        

-    
-mindmap
-  root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-        British popular psychology author Tony Buzan
-    Research
-      On effectiveness
and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-    Tools
-      Pen and paper
-      Mermaid
-    

-    

-    
-  example-diagram
-    

-
-    
-    
-    
-    
-