Add mermaid antora extension

antora-playbook.yml

@@ -67,4 +67,21 @@ urls:
   html_extension_style: indexify
 antora:
   extensions:
-  - ./extensions/unlisted-pages-extension.js
+  - ./extensions/unlisted-pages-extension.js
+  - require: '@sntke/antora-mermaid-extension'
+    mermaid_library_url: https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs
+    script_stem: head-scripts
+    mermaid_initialize_options:
+      start_on_load: true
+      theme: base
+      security_level: loose
+      theme_variables:
+        primary_color: '#00DB74'
+        primary_text_color: '#161616'
+        primary_border_color: '#00A657'
+        line_color: '#2152E5'
+        secondary_color: '#EDEDED'
+        tertiary_color: '#F7F7F7'
+        background: '#FFFFFF'
+        main_bkg: '#EDEDED'
+        text_color: '#161616'

docs/contributors/modules/templates/pages/test-page-one.adoc

@@ -16,6 +16,17 @@ WARNING: *Want to see a warning?* This is a warning.
 
 CAUTION: *Want to see a caution?* This is a caution.
 
+== Diagram
+
+[mermaid]
+....
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>Bob: Hello Bob, how are you?
+    Bob-->>Alice: Great!
+....
+
 Sometimes we have sections separated by horizontal lines, like this:
 
 ---

docs/guides/modules/orchestrate/pages/jobs-steps.adoc

@@ -71,6 +71,44 @@ You can set the type of a job by adding the `type` key to the job configuration.
 
 See the xref:reference:ROOT:configuration-reference.adoc#job-type[Confirguration reference] page for more information on how to use the different job types.
 
+=== Job status transitions
+
+.Job status transitions
+[mermaid]
+----
+stateDiagram-v2
+    [*] --> blocked
+
+    blocked --> pending
+    blocked --> unauthorized : trying to use a context without permission
+
+    pending --> running: For build jobs, Mongo builds are created here
+
+    pending --> skipped : PRs only / ci-skip / no project found / abusive / sanctioned / etc.
+    pending --> blocked : retriable error
+    pending --> terminated
+
+    running --> canceled
+    pending --> canceled
+    blocked --> canceled
+
+
+    running --> failed
+    running --> success
+    running --> terminated
+
+    state "terminated-unknown" as terminated
+
+    skipped --> [*]
+    terminated --> [*]
+    success --> [*]
+    failed --> [*]
+    canceled --> [*]
+    unauthorized --> [*]
+
+----
+
+
 [#steps-overview]
 == Steps overview
 

docs/guides/modules/orchestrate/pages/pipelines.adoc

@@ -114,6 +114,29 @@ Once you have set up a pipeline you need to set up a trigger to connect it to. S
 --
 ====
 
+== Pipeline states
+
+.Pipeline states
+[mermaid]
+----
+stateDiagram-v2
+    state "setup-pending" as setuppending
+
+    state type <<choice>>
+
+    [*] --> type
+    type --> setuppending : Dynamic config enabled<br/>and setup true in config
+    type --> pending : Dynamic config not enabled,<br/>or setup true not in config
+
+    setuppending --> setup
+    setup --> pending
+    pending --> created
+    pending --> errored
+    created --> [*]
+    errored --> [*]
+
+----
+
 == Pipeline parameters
 
 Pipeline parameters are declared using the `parameters` key at the top level of a `.circleci/config.yml` file. Pipeline parameters can be referenced by value and used as a configuration variable under the scope `pipeline.parameters`.

docs/guides/modules/orchestrate/pages/workflows.adoc

@@ -823,7 +823,7 @@ image::guides:ROOT:orchestrate-and-trigger/rerun-from-failed-workflows-page.png[
 NOTE: If you rerun a workflow containing a job that was previously re-run with SSH, the new workflow runs with SSH enabled for that job, even after SSH capability is disabled at the project level.
 
 [#states]
-=== Workflow states
+== Workflow states
 
 Workflows may have one of the following states:
 
@@ -866,10 +866,54 @@ Workflows may have one of the following states:
 | UNAUTHORIZED
 | One or more of the jobs terminated with a `unauthorized` job status. The user who triggered the pipeline or approved an approval job does not have access to a required restricted context.
 | Yes
+
+| QUEUED
+| The workflow is queued due to being part of a serial group. For more informaiton, see the xref:controlling-serial-execution-across-your-organization.adoc[Controlling serial execution across your organization] page.
+| No
+
 |===
 
 NOTE: After 90 days non-terminal workflows are automatically by CircleCI.
 
+The following state diagram shows the possible states and transitions of a workflow:
+
+.Workflow states
+[mermaid]
+----
+stateDiagram-v2
+    [*] --> running
+
+    running --> success
+
+    running --> failing
+
+    running --> on_hold
+    on_hold --> canceled
+    on_hold --> running : approve job
+    on_hold --> success
+
+    running --> canceled
+    failing --> failed
+    failing --> canceled
+
+    running --> failed
+    running --> error
+    running --> not_run
+    running --> unauthorized
+
+    running --> queued
+    queued --> running: acquired lock
+
+    success --> [*]
+    canceled --> [*]
+    failed --> [*]
+    error --> [*]
+    unauthorized --> [*]
+    not_run --> [*]
+
+----
+
+
 [#troubleshooting]
 == Troubleshooting
 

package.json

@@ -22,6 +22,7 @@
     "@antora/site-generator": "3.1.12",
     "@dotenvx/dotenvx": "^1.40.0",
     "@redocly/cli": "^2.0.0",
+    "@sntke/antora-mermaid-extension": "^0.0.8",
     "browser-sync": "^3.0.4",
     "gulp": "^5.0.0",
     "snippet-enricher-cli": "0.0.8"

ui/src/css/doc.css

@@ -1439,4 +1439,36 @@
 .doc .circle-red {
   color: #8F001C !important;
   font-weight: var(--heading-font-weight);
+}
+
+/* === MERMAID DIAGRAM STYLES === */
+
+/* Basic container styling */
+.doc .mermaid {
+  text-align: center;
+  margin: 1rem 0;
+  overflow-x: auto;
+}
+
+/* Responsive sizing */
+.doc .mermaid svg {
+  max-width: 100%;
+  height: auto;
+  cursor: default; /* Prevent zoom cursor on hover */
+}
+
+/* Prevent zoom cursor on mermaid diagrams */
+.doc .mermaid,
+.doc .mermaid *,
+.doc .imageblock .mermaid,
+.doc .imageblock .mermaid *,
+.doc .imageblock .content .mermaid,
+.doc .imageblock .content .mermaid * {
+  cursor: default !important;
+}
+
+/* Specifically override the imageblock content zoom cursor when it contains mermaid */
+.doc .imageblock .content .mermaid ~ *,
+.doc .imageblock .content .mermaid + * {
+  cursor: default !important;
 }