From f46f8752cadf0cf069a00e1d2c4e1243a921a020 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 28 Sep 2022 17:49:47 +0200
Subject: [PATCH] Adding example diagram as a template for a new diagram

---
 .vite/build.ts                                | 17 ++++-
 cypress/platform/knsv2.html                   |  8 +--
 packages/mermaid-example-diagram/package.json | 70 +++++++++++++++++++
 .../src/add-diagram.ts                        | 17 +++++
 .../src/exampleDetector.ts                    |  3 +
 .../src/exampleDiagram.spec.js                | 16 +++++
 .../src/exampleDiagramDb.js                   | 33 +++++++++
 .../src/exampleDiagramRenderer.js             | 55 +++++++++++++++
 .../src/mermaidUtils.ts                       | 63 +++++++++++++++++
 .../src/parser/exampleDiagram.jison           | 43 ++++++++++++
 .../mermaid-example-diagram/src/registry.ts   | 33 +++++++++
 .../mermaid-example-diagram/src/styles.js     |  3 +
 .../src/types/index.d.ts                      |  7 ++
 .../mermaid-example-diagram/tsconfig.json     |  9 +++
 pnpm-lock.yaml                                | 13 +---
 15 files changed, 374 insertions(+), 16 deletions(-)
 create mode 100644 packages/mermaid-example-diagram/package.json
 create mode 100644 packages/mermaid-example-diagram/src/add-diagram.ts
 create mode 100644 packages/mermaid-example-diagram/src/exampleDetector.ts
 create mode 100644 packages/mermaid-example-diagram/src/exampleDiagram.spec.js
 create mode 100644 packages/mermaid-example-diagram/src/exampleDiagramDb.js
 create mode 100644 packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
 create mode 100644 packages/mermaid-example-diagram/src/mermaidUtils.ts
 create mode 100644 packages/mermaid-example-diagram/src/parser/exampleDiagram.jison
 create mode 100644 packages/mermaid-example-diagram/src/registry.ts
 create mode 100644 packages/mermaid-example-diagram/src/styles.js
 create mode 100644 packages/mermaid-example-diagram/src/types/index.d.ts
 create mode 100644 packages/mermaid-example-diagram/tsconfig.json
diff --git a/.vite/build.ts b/.vite/build.ts
index 306e4cc05..6855d3e48 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -29,6 +29,16 @@ const packageOptions = {
     packageName: 'mermaid-mindmap',
     file: 'registry.ts',
   },
+  'mermaid-example-diagram': {
+    name: 'mermaid-example-diagram',
+    packageName: 'mermaid-example-diagram',
+    file: 'add-diagram.ts',
+  },
+  'mermaid-example-diagram-detector': {
+    name: 'mermaid-example-diagram-detector',
+    packageName: 'mermaid-example-diagram',
+    file: 'registry.ts',
+  },
 };
 
 interface BuildOptions {
@@ -97,7 +107,11 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
 
   if (watch && config.build) {
     config.build.watch = {
-      include: ['packages/mermaid-mindmap/src/**', 'packages/mermaid/src/**'],
+      include: [
+        'packages/mermaid-mindmap/src/**',
+        'packages/mermaid/src/**',
+        'packages/mermaid-example-diagram/src/**',
+      ],
     };
   }
 
@@ -122,6 +136,7 @@ const main = async () => {
 if (watch) {
   build(getBuildConfig({ minify: false, watch, entryName: 'mermaid' }));
   build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
+  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
 } else {
   void main();
 }
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index f005e1088..4accb1b8d 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -45,12 +45,11 @@
   </head>
   <body>
     <div>Security check</div>
-    <pre id="diagram" class="mermaid2">
-            flowchart LR
-          A -> B
+    <pre id="diagram" class="mermaid">
+info
         </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
             mindmap
           root
             ch1
@@ -58,6 +57,7 @@
         </pre
     >
     <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
+    <script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
     <script src="./packages/mermaid/dist/mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
diff --git a/packages/mermaid-example-diagram/package.json b/packages/mermaid-example-diagram/package.json
new file mode 100644
index 000000000..fa3c570b6
--- /dev/null
+++ b/packages/mermaid-example-diagram/package.json
@@ -0,0 +1,70 @@
+{
+  "name": "@mermaid-js/mermaid-example-diagram",
+  "version": "9.2.0-rc2",
+  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
+  "main": "dist/mermaid-mindmap.core.mjs",
+  "module": "dist/mermaid-mindmap.core.mjs",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/mermaid-example-diagram.min.js",
+      "import": "./dist/mermaid-example-diagram.core.mjs"
+    },
+    "./*": "./*"
+  },
+  "keywords": [
+    "diagram",
+    "markdown",
+    "mindmap",
+    "mermaid"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:watch": "yarn build:code --watch",
+    "build:esbuild": "concurrently \"yarn build:code\" \"yarn build:types\"",
+    "build": "yarn clean; yarn build:esbuild",
+    "dev": "node .esbuild/serve.cjs",
+    "release": "yarn build",
+    "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
+    "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
+    "lint:jison": "ts-node-esm src/jison/lint.mts",
+    "ci": "vitest run",
+    "test": "yarn lint && vitest run",
+    "test:watch": "vitest --coverage --watch",
+    "todo-prepublishOnly": "yarn build && yarn test",
+    "todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
+    "todo-pre-commit": "lint-staged"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mermaid-js/mermaid"
+  },
+  "author": "Knut Sveidqvist",
+  "license": "MIT",
+  "standard": {
+    "ignore": [
+      "**/parser/*.js",
+      "dist/**/*.js",
+      "cypress/**/*.js"
+    ],
+    "globals": [
+      "page"
+    ]
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "concurrently": "^7.4.0",
+    "rimraf": "^3.0.2"
+  },
+  "resolutions": {
+    "d3": "^7.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ]
+}
diff --git a/packages/mermaid-example-diagram/src/add-diagram.ts b/packages/mermaid-example-diagram/src/add-diagram.ts
new file mode 100644
index 000000000..ec32ed838
--- /dev/null
+++ b/packages/mermaid-example-diagram/src/add-diagram.ts
@@ -0,0 +1,17 @@
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/exampleDiagram';
+import * as db from './exampleDiagramDb';
+import renderer from './exampleDiagramRenderer';
+import styles from './styles';
+import { injectUtils } from './mermaidUtils';
+
+window.mermaid.connectDiagram(
+  'example-diagram',
+  {
+    db,
+    renderer,
+    parser,
+    styles,
+  },
+  injectUtils
+);
diff --git a/packages/mermaid-example-diagram/src/exampleDetector.ts b/packages/mermaid-example-diagram/src/exampleDetector.ts
new file mode 100644
index 000000000..2c71b1e07
--- /dev/null
+++ b/packages/mermaid-example-diagram/src/exampleDetector.ts
@@ -0,0 +1,3 @@
+export const detector = (txt: string) => {
+  return txt.match(/^\s*example-diagram/) !== null;
+};
diff --git a/packages/mermaid-example-diagram/src/exampleDiagram.spec.js b/packages/mermaid-example-diagram/src/exampleDiagram.spec.js
new file mode 100644
index 000000000..8bcce51d4
--- /dev/null
+++ b/packages/mermaid-example-diagram/src/exampleDiagram.spec.js
@@ -0,0 +1,16 @@
+import { parser } from './parser/info';
+import infoDb from './infoDb';
+describe('when parsing an info graph it', function () {
+  let ex;
+  beforeEach(function () {
+    ex = parser;
+    ex.yy = infoDb;
+  });
+
+  it('should handle an info definition', function () {
+    let str = `info
+    showInfo`;
+
+    ex.parse(str);
+  });
+});
diff --git a/packages/mermaid-example-diagram/src/exampleDiagramDb.js b/packages/mermaid-example-diagram/src/exampleDiagramDb.js
new file mode 100644
index 000000000..a65d2c839
--- /dev/null
+++ b/packages/mermaid-example-diagram/src/exampleDiagramDb.js
@@ -0,0 +1,33 @@
+/** Created by knut on 15-01-14. */
+import { log } from './mermaidUtils';
+
+var message = '';
+var info = false;
+
+export const setMessage = (txt) => {
+  log.debug('Setting message to: ' + txt);
+  message = txt;
+};
+
+export const getMessage = () => {
+  return message;
+};
+
+export const setInfo = (inf) => {
+  info = inf;
+};
+
+export const getInfo = () => {
+  return info;
+};
+
+export default {
+  setMessage,
+  getMessage,
+  setInfo,
+  getInfo,
+  clear: () => {
+    message = '';
+    info = false;
+  },
+};
diff --git a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
new file mode 100644
index 000000000..1bb7a9de9
--- /dev/null
+++ b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
@@ -0,0 +1,55 @@
+/** Created by knut on 14-12-11. */
+import { select } from 'd3';
+import { log, getConfig } from './mermaidUtils';
+
+/**
+ * Draws a an info picture in the tag with id: id based on the graph definition in text.
+ *
+ * @param {any} text
+ * @param {any} id
+ * @param {any} version
+ * @param diagObj
+ */
+export const draw = (text, id, version, diagObj) => {
+  try {
+    log.debug('Rendering info diagram\n' + text);
+
+    const securityLevel = getConfig().securityLevel;
+    // Handle root and Document for when rendering in sanbox mode
+    let sandboxElement;
+    if (securityLevel === 'sandbox') {
+      sandboxElement = select('#i' + id);
+    }
+    const root =
+      securityLevel === 'sandbox'
+        ? select(sandboxElement.nodes()[0].contentDocument.body)
+        : select('body');
+
+    // Parse the graph definition
+    // parser.parse(text);
+    // log.debug('Parsed info diagram');
+    // Fetch the default direction, use TD if none was found
+    const svg = root.select('#' + id);
+
+    const g = svg.append('g');
+
+    g.append('text') // text label for the x axis
+      .attr('x', 100)
+      .attr('y', 40)
+      .attr('class', 'version')
+      .attr('font-size', '32px')
+      .style('text-anchor', 'middle')
+      .text('v ' + version);
+
+    svg.attr('height', 100);
+    svg.attr('width', 400);
+    // svg.attr('viewBox', '0 0 300 150');
+  } catch (e) {
+    log.error('Error while rendering info diagram');
+    log.error(e.message);
+  }
+};
+
+export default {
+  draw,
+};
diff --git a/packages/mermaid-example-diagram/src/mermaidUtils.ts b/packages/mermaid-example-diagram/src/mermaidUtils.ts
new file mode 100644
index 000000000..7d8a459e6
--- /dev/null
+++ b/packages/mermaid-example-diagram/src/mermaidUtils.ts
@@ -0,0 +1,63 @@
+const warning = () => null;
+
+export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
+
+export const LEVELS: Record<LogLevel, number> = {
+  trace: 0,
+  debug: 1,
+  info: 2,
+  warn: 3,
+  error: 4,
+  fatal: 5,
+};
+
+export const log: Record<keyof typeof LEVELS, typeof console.log> = {
+  trace: warning,
+  debug: warning,
+  info: warning,
+  warn: warning,
+  error: warning,
+  fatal: warning,
+};
+
+export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
+export let getConfig: () => object;
+export let sanitizeText: (str: string) => string;
+/**
+ * Placeholder for the real function that will be injected by mermaid.
+ */
+// eslint-disable @typescript-eslint/no-explicit-any
+export let setupGraphViewbox: (
+  graph: any,
+  svgElem: any,
+  padding: any,
+  useMaxWidth: boolean
+) => void;
+
+/**
+ * Function called by mermaid that injects utility functions that help the diagram to be a good citizen.
+ * @param _log
+ * @param _setLogLevel
+ * @param _getConfig
+ * @param _sanitizeText
+ * @param _setupGraphViewbox
+ */
+export const injectUtils = (
+  _log: Record<keyof typeof LEVELS, typeof console.log>,
+  _setLogLevel: any,
+  _getConfig: any,
+  _sanitizeText: any,
+  _setupGraphViewbox: any
+) => {
+  _log.debug('Mermaid utils injected into example-diagram');
+  log.trace = _log.trace;
+  log.debug = _log.debug;
+  log.info = _log.info;
+  log.warn = _log.warn;
+  log.error = _log.error;
+  log.fatal = _log.fatal;
+  setLogLevel = _setLogLevel;
+  getConfig = _getConfig;
+  sanitizeText = _sanitizeText;
+  setupGraphViewbox = _setupGraphViewbox;
+};
diff --git a/packages/mermaid-example-diagram/src/parser/exampleDiagram.jison b/packages/mermaid-example-diagram/src/parser/exampleDiagram.jison
new file mode 100644
index 000000000..47480b591
--- /dev/null
+++ b/packages/mermaid-example-diagram/src/parser/exampleDiagram.jison
@@ -0,0 +1,43 @@
+%lex
+
+%options case-insensitive
+
+%{
+	// Pre-lexer code can go here
+%}
+
+%%
+
+"info"		      return 'info'    ;
+[\s\n\r]+         return 'NL'      ;
+[\s]+ 		      return 'space';
+"showInfo"		  return 'showInfo';
+<<EOF>>           return 'EOF'     ;
+.                 return 'TXT' ;
+
+/lex
+
+%start start
+
+%% /* language grammar */
+
+start
+// %{	: info document 'EOF' { return yy; } }
+	: info document 'EOF' { return yy; }
+	;
+
+document
+	: /* empty */
+	| document line
+	;
+
+line
+	: statement { }
+	| 'NL'
+	;
+
+statement
+	:  showInfo   { yy.setInfo(true);  }
+	;
+
+%%
diff --git a/packages/mermaid-example-diagram/src/registry.ts b/packages/mermaid-example-diagram/src/registry.ts
new file mode 100644
index 000000000..92ff3bd00
--- /dev/null
+++ b/packages/mermaid-example-diagram/src/registry.ts
@@ -0,0 +1,33 @@
+// @ts-ignore: TODO Fix ts errors
+import { detector } from './exampleDetector';
+
+const scriptElement = document.currentScript as HTMLScriptElement;
+const path = scriptElement.src;
+const lastSlash = path.lastIndexOf('/');
+const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
+
+if (typeof document !== 'undefined') {
+  if (window.mermaid && typeof window.mermaid.detectors === 'object') {
+    window.mermaid.detectors.push({ id: 'example-diagram', detector });
+  } else {
+    window.mermaid = {};
+    window.mermaid.detectors = [{ id: 'example-diagram', detector }];
+  }
+
+  /*
+   * Wait for document loaded before starting the execution.
+   */
+  window.addEventListener(
+    'load',
+    () => {
+      if (window.mermaid && typeof window.mermaid.detectors === 'object') {
+        window.mermaid.detectors.push({
+          id: 'example-diagram',
+          detector,
+          path: baseFolder,
+        });
+      }
+    },
+    false
+  );
+}
diff --git a/packages/mermaid-example-diagram/src/styles.js b/packages/mermaid-example-diagram/src/styles.js
new file mode 100644
index 000000000..0b0729813
--- /dev/null
+++ b/packages/mermaid-example-diagram/src/styles.js
@@ -0,0 +1,3 @@
+const getStyles = () => ``;
+
+export default getStyles;
diff --git a/packages/mermaid-example-diagram/src/types/index.d.ts b/packages/mermaid-example-diagram/src/types/index.d.ts
new file mode 100644
index 000000000..999ff2f49
--- /dev/null
+++ b/packages/mermaid-example-diagram/src/types/index.d.ts
@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  interface Window {
+    mermaid: any; // 👈️ turn off type checking
+  }
+}
diff --git a/packages/mermaid-example-diagram/tsconfig.json b/packages/mermaid-example-diagram/tsconfig.json
new file mode 100644
index 000000000..45076b7b5
--- /dev/null
+++ b/packages/mermaid-example-diagram/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "include": ["./src/**/*.ts"],
+  "typeRoots": ["./src/types"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f5748387e..b0255dd7b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -259,24 +259,15 @@ importers:
       unist-util-flatmap: 1.0.0
       vitest: 0.23.4_y2hohvmcqnhseytaw4yjcnsnkm
 
-  packages/mermaid-mindmap:
+  packages/mermaid-example-diagram:
     specifiers:
-      '@braintree/sanitize-url': ^6.0.0
       concurrently: ^7.4.0
-      d3: ^7.0.0
-      mermaid: workspace:*
-      non-layered-tidy-tree-layout: ^2.0.2
       rimraf: ^3.0.2
-    dependencies:
-      '@braintree/sanitize-url': 6.0.0
-      d3: 7.6.1
-      mermaid: link:../mermaid
-      non-layered-tidy-tree-layout: 2.0.2
     devDependencies:
       concurrently: 7.4.0
       rimraf: 3.0.2
 
-  packages/rm-mermaid-mindmap-detector:
+  packages/mermaid-mindmap:
     specifiers:
       '@braintree/sanitize-url': ^6.0.0
       concurrently: ^7.4.0
