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"