[Mermaid diagrams] Enable configurable automatic numbering (#1829)

* feat: enable automatic numbering for mermaid diagrams * chore: add changeset
commercetools · Sep 19, 2023 · d7f40a9 · d7f40a9
1 parent 5ed7d98
commit d7f40a9
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 7 deletions.
diff --git a/.changeset/polite-apricots-move.md b/.changeset/polite-apricots-move.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-docs/ui-kit': minor
+---
+
+Enable configurable automatic numbering for mermaid sequence diagrams.
diff --git a/packages/ui-kit/src/components/mermaid-client-side.tsx b/packages/ui-kit/src/components/mermaid-client-side.tsx
@@ -70,7 +70,7 @@ const config = {
     mirrorActors: false,
     useMaxWidth: true,
     rightAngles: false,
-    showSequenceNumbers: true,
+    showSequenceNumbers: false,
     diagramMarginX: 5, // prevent border clipping
     diagramMarginY: 5, // prevent border clippings
     bottomMarginAdj: 2,

diff --git a/websites/docs-smoke-test/src/content/components/mermaid-diagram.mdx b/websites/docs-smoke-test/src/content/components/mermaid-diagram.mdx
@@ -4,6 +4,28 @@ title: Mermaid Diagrams
 
 # A Sequence Diagram
 
+## With automatic numbering
+
+```mermaid
+sequenceDiagram
+  autonumber
+  participant CFP
+  participant HCP API
+  participant Extension Server
+  Note over HCP API: Formerly known as CTP
+  CFP->>+HCP API: Add this to the Cart
+  HCP API->>+HCP API: Do but don't persist yet
+  HCP API->>+Extension Server: New cart would be this. Okay?
+  Extension Server-->>-HCP API: OK, but change this before returning!
+  HCP API-->>-CFP: Cool, here's your new Cart
+  alt For comparison without extension
+  CFP->>+HCP API: A change that has not extension configured
+  HCP API-->>-CFP: I #9829; you, here's your new resource
+  end
+```
+
+## Without automatic numbering
+
 ```mermaid
 sequenceDiagram
   participant CFP

diff --git a/websites/documentation/src/content/writing/images.mdx b/websites/documentation/src/content/writing/images.mdx
@@ -62,6 +62,36 @@ sequenceDiagram
     end
 ```
 
+If you want to show the sequence number attached to each arrow in a sequence diagram, you need to add the `autonumber` variable.
+
+````md title="you write:" secondaryTheme
+```mermaid
+sequenceDiagram
+    autonumber
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+````
+
+```mermaid
+sequenceDiagram
+    autonumber
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
 # Videos
 
 It's possible to embed a video in a page by using `Video` component.
@@ -77,10 +107,11 @@ The component accepts the following properties:
       poster="https://customer-ytbpo1yna9xohg5m.cloudflarestream.com/e1aa2e24614b242afdd4afb36a0c2f75/thumbnails/thumbnail.jpg?time=6s"
     ></Video>
 
-  ```md title="you write:" secondaryTheme
-  <Video
-    url="https://customer-ytbpo1yna9xohg5m.cloudflarestream.com/e1aa2e24614b242afdd4afb36a0c2f75/manifest/video.m3u8"
-    poster="https://customer-ytbpo1yna9xohg5m.cloudflarestream.com/e1aa2e24614b242afdd4afb36a0c2f75/thumbnails/thumbnail.jpg?time=6s"
-  />
-  ```
+```md title="you write:" secondaryTheme
+<Video
+  url="https://customer-ytbpo1yna9xohg5m.cloudflarestream.com/e1aa2e24614b242afdd4afb36a0c2f75/manifest/video.m3u8"
+  poster="https://customer-ytbpo1yna9xohg5m.cloudflarestream.com/e1aa2e24614b242afdd4afb36a0c2f75/thumbnails/thumbnail.jpg?time=6s"
+/>
+```
+
 </SideBySide>