Improved New Documentation

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

@@ -11,7 +11,7 @@ export default defineConfig({
   themeConfig: {
     nav: nav(),
     editLink: {
-      pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/docs/:path',
+      pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/:path',
       text: 'Edit this page on GitHub',
     },
 

packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts

@@ -1,6 +1,23 @@
 import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
+// import { deflate } from 'pako';
+// import { fromUint8Array } from 'js-base64';
 import shiki from 'shiki';
 
+// const serializeState = (state: State, serde: SerdeType = 'pako'): string => {
+// 	if (serdes[serde] === undefined) {
+// 		throw new Error(`Unknown serde type: ${serde}`);
+// 	}
+// 	const json = JSON.stringify(state);
+// 	const serialized = serdes[serde].serialize(json);
+// 	return `${serde}:${serialized}`;
+// };
+
+// const serialize = (state: string): string => {
+//   const data = new TextEncoder().encode(state);
+//   const compressed = deflate(data, { level: 9 });
+//   return fromUint8Array(compressed, true);
+// };
+
 export default {
   config: async (md) => {
     MermaidMarkdown(md);
@@ -15,9 +32,16 @@ export default {
         let code = highlighter.codeToHtml(token.content, { lang: 'mermaid' });
         code = code.replace('#2e3440ff', 'transparent');
         code = code.replace('#292D3E', 'transparent');
+        console.log(token.content);
+
         code =
           '<h5>Code:</h5>' +
-          '<div class="language-mermaid"><button class="copy"></button><span class="lang">mermaid</span>' +
+          `<div class="language-mermaid">` +
+          // tODO: compute edit link!
+          // `<a class="edit" href="https://mermaid.live/edit#pako:${serialize(
+          //   token.content
+          // )}"  target=”_blank”>✒️</a>` +
+          `<button class="copy"></button><span class="lang">mermaid</span>` +
           code +
           '</div>';
 

packages/mermaid/src/docs/.vitepress/theme/custom.css

@@ -19,3 +19,9 @@
 .vp-doc > div {
   width: 100%;
 }
+
+a.edit {
+  margin: 12px;
+  position: relative;
+  top: 10px;
+}

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

@@ -502,10 +502,10 @@ Beginner's tip—a full example using interactive links in a html context:
   </pre>
 
   <script>
-    var callback = function () {
+    const callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
       securityLevel: 'loose',
@@ -594,7 +594,7 @@ A shorter form of adding a class is to attach the classname to the node using th
 ```mermaid-example
 flowchart LR
     A:::someclass --> B
-    classDef someclass fill:#f96;
+    classDef someclass fill:#f96
 ```
 
 ### Css classes