docs: Add iconify docs

docs/config/setup/classes/mermaid.UnknownDiagramError.md

@@ -127,7 +127,7 @@ Error.prepareStackTrace
 
 #### Defined in
 
-node_modules/@types/node/globals.d.ts:28
+node_modules/@types/node/globals.d.ts:98
 
 ---
 
@@ -141,7 +141,7 @@ Error.stackTraceLimit
 
 #### Defined in
 
-node_modules/@types/node/globals.d.ts:30
+node_modules/@types/node/globals.d.ts:100
 
 ## Methods
 
@@ -168,4 +168,4 @@ Error.captureStackTrace
 
 #### Defined in
 
-node_modules/@types/node/globals.d.ts:21
+node_modules/@types/node/globals.d.ts:91

docs/syntax/architecture.md

@@ -246,3 +246,26 @@ architecture-beta
     disk2:T -- B:db
 ```
 ````
+
+<div id="arch-example">loading...</div>
+
+<script>
+const main = async () => {
+  const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json');
+  mermaid.registerIconPacks(await logos.json());
+  const svg = await window.render('d'+Date.now().toString(), `architecture-beta
+      group api(logos:aws-api-gateway)[API]
+
+      service db(logos:aws-aurora)[Database] in api
+      service disk1(logos:aws-glacier)[Storage] in api
+      service disk2(logos:aws-s3)[Storage] in api
+      service server(logos:aws-ec2)[Server] in api
+
+      db:L -- R:server
+      disk1:T -- B:server
+      disk2:T -- B:db`, {});
+  document.getElementById('arch-example').innerHTML = svg;
+};
+
+setTimeout(main, 100)
+</script>

packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue

@@ -86,11 +86,9 @@ onUnmounted(() => mut.disconnect());
 
 const renderChart = async () => {
   console.log('rendering chart' + props.id + code.value);
-  const hasDarkClass = document.documentElement.classList.contains('dark');
   const mermaidConfig = {
     securityLevel: 'loose',
     startOnLoad: false,
-    theme: hasDarkClass ? 'dark' : 'default',
   };
   let svgCode = await render(props.id, code.value, mermaidConfig);
   // This is a hack to force v-html to re-render, otherwise the diagram disappears

packages/mermaid/src/docs/.vitepress/theme/mermaid.ts

@@ -5,7 +5,19 @@ const init = mermaid.registerExternalDiagrams([zenuml]);
 
 export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
   await init;
-  mermaid.initialize(config);
+  const hasDarkClass = document.documentElement.classList.contains('dark');
+  const theme = hasDarkClass ? 'dark' : 'default';
+  mermaid.initialize({ ...config, theme });
   const { svg } = await mermaid.render(id, code);
   return svg;
 };
+
+declare global {
+  interface Window {
+    mermaid: typeof mermaid;
+    render: typeof render;
+  }
+}
+
+window.mermaid = mermaid;
+window.render = render;

packages/mermaid/src/docs/syntax/architecture.md

@@ -208,3 +208,26 @@ architecture-beta
     disk2:T -- B:db
 ```
 ````
+
+<div id="arch-example">loading...</div>
+
+<script>
+const main = async () => {
+  const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json');
+  mermaid.registerIconPacks(await logos.json());
+  const svg = await window.render('d'+Date.now().toString(), `architecture-beta
+      group api(logos:aws-api-gateway)[API]
+
+      service db(logos:aws-aurora)[Database] in api
+      service disk1(logos:aws-glacier)[Storage] in api
+      service disk2(logos:aws-s3)[Storage] in api
+      service server(logos:aws-ec2)[Server] in api
+
+      db:L -- R:server
+      disk1:T -- B:server
+      disk2:T -- B:db`, {});
+  document.getElementById('arch-example').innerHTML = svg;
+};
+
+setTimeout(main, 100)
+</script>