Merge pull request #3118 from mermaid-js/3116_paddings

Handle diagram paddings in a consistent way
2025-11-03 12:25:22 +01:00 · 2022-06-08 20:24:18 +02:00
parent 348fa3318b 4dd3d3bc76
commit 5d30d46535
7 changed files with 242 additions and 228 deletions
--- 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: {
--- 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; */
      }
    </style>
  </head>
  <body>
    <div>info below</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 class="">
+      <div class="mermaid" style="width: 100%; height: 400px;">
+flowchart TB;subgraph "number as labels";1;end;
      </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%;">
-flowchart TB
-   subgraph S1
-    sub1 -->sub2
-   end
-  subgraph S2
-    sub4
-   end
-   S1 --> S2
-   sub1 --> sub4
+      <div class="mermaid" style="width: 100%; height: 400px;">
+flowchart TB;a[APA];
      </div>
-<div class="mermaid2" style="width: 100%; height: 20%;">
-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
-</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 class="mermaid" style="margin-left:100px;">
+graph TD
+      work --> sleep
+      sleep --> work
+      eat --> sleep
+      work --> eat
  </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'} }%%
+      <div class="mermaid" style="margin-left:100px;">
 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%;">
+      work --> sleep
+      sleep --> work
+      eat --> sleep
+      work --> eat
+  </div>
+      <div class="mermaid" style="">
+ 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
+    </div>
+    <div class="mermaid" style="">
+      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
+    </div>
+      <div class="mermaid" style="">
+      graph TD
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+    </div>
+    <div class="mermaid" style="">
+      graph TD
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+    </div>
+      <div class="mermaid" style="">
+      flowchart TD
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+    </div>
+    <div class="mermaid" style="">
+      flowchart TD
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+    </div>
+      <div class="mermaid" style="">
 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["<strong>Haiya</strong>"]---->b
+</div>
+      <div class="mermaid" style="">
+flowchart LR
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+        a["<strong>Haiya</strong>"]---->b
+</div>
+    <div class="mermaid" style="">
+      flowchart TD
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+    </div>
+    <div class="mermaid" style="">
+      flowchart TD
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+    </div>
+    <div class="mermaid" style="">
+      %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+classDiagram-v2
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; 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 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      </div>
+    <div class="mermaid" style="">
+classDiagram-v2
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; 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 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
      </div>
-
-
  <script src="./mermaid.js"></script>
    <script>
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        theme: 'neutral',
-        arrowMarkerAbsolute: true,
+        // theme: 'neutral',
+        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
-        flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
-        htmlLabels: true,
+        flowchart: { curve: 'cardinal', htmlLabels: false },
+        // htmlLabels: true,
        // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
        // fontFamily: '"times", sans-serif',
-        // fontFamily: 'courier',
-        fontSize: 18,
-        curve: 'cardinal',
+        fontFamily: 'courier',
+        // fontSize: 18,
+        // curve: 'cardinal',
        securityLevel: 'loose',
        // themeVariables: {relationLabelColor: 'red'}
      });