Mermaid Plugin: Render Inline Mermaid

main/.vitepress/config.mjs

@@ -1,8 +1,8 @@
-import { defineConfig } from 'vitepress';
 import { nav } from './themeConfig/nav.js';
 import { rewrites } from './themeConfig/rewrites.js';
+import { withMermaid } from "vitepress-plugin-mermaid";
 
-export default defineConfig({
+export default withMermaid({
   /* --- FOR DEPLOYMENT TO GITHUB PAGES--- */
   base: '/', // The base URL the site will be deployed at.
   outDir: '../dist',
@@ -674,4 +674,13 @@ export default defineConfig({
       },
     ],
   },
+  // optionally, you can pass MermaidConfig
+  mermaid: {
+  // refer https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
+  },
+  // optionally set additional config for plugin itself with MermaidPluginConfig
+  mermaidPlugin: {
+  //  class: "mermaid my-class", // set additional css classes for parent container 
+  },
+
 });

main/guides/orchestration/index.md

@@ -24,6 +24,32 @@ The Orchestration API handles asynchronous tasks and complex workflows, includin
 
 The following sequence diagram provides a comprehensive overview of the Orchestration process within the Agoric platform. This example illustrates the interaction between various components, highlighting how the Orchestration library (`OrchLib`) facilitates cross-chain operations. This is a good first example to understand the flow of the Orchestration API, showing the steps involved in creating and managing cross-chain transactions.
 
-<br/>
-<img src="/reference/assets/sequence-diagrams/orchestration-workflow-1.svg" width="100%" />
-<br/>
+```mermaid
+---
+title: Orchestration Osmosis Transfer Example
+config:
+  themeVariables:
+    fontSize: "32px"
+---
+sequenceDiagram
+    actor contract
+    contract->>OrchLib: provideOrchestration
+    OrchLib --> contract: orch
+    create participant orch
+    contract --> orch: getChain('osmosis')
+    orch->>AgoricNames: lookup('chain', 'osmosis')
+    AgoricNames-->>orch: ChainInfo for osmosis
+    orch --> contract: osmosis chain object
+    participant osmosis
+    contract->>osmosis: makeAccount()
+    osmosis --> contract: osmoAccount123
+    create participant osmoAccount123
+    contract->>osmoAccount123: getAddress()
+    contract->>osmoAccount123: getBalances()
+    contract->>osmoAccount123: send(amount, receiverAddress)
+    osmoAccount123-->>contract: Transaction Status
+    %% note Cross-Chain Operation
+    contract->>osmoAccount123: transferSteps(amount, transferMsg)
+    %% note Execute Steps Across Chains
+    osmoAccount123-->>contract: Transfer Complete
+```

package.json

@@ -67,10 +67,12 @@
     "eslint-plugin-prettier": "^5.2.1",
     "glob": "7.1.7",
     "import-meta-resolve": "^2.2.2",
+    "mermaid": "^11.3.0",
     "prettier": "^3.3.3",
     "ses": "^1.8.0",
     "stylus": "^0.62.0",
-    "vitepress": "1.3.4"
+    "vitepress": "1.3.4",
+    "vitepress-plugin-mermaid": "^2.0.17"
   },
   "globals": {
     "harden": "readonly"