Merge pull request #4486 from Yokozuna59/standardized-diagrams-defini…

…tions standardize info diagram definitions
mermaid-js · Jun 16, 2023 · 15dbf22 · 15dbf22
2 parents 3662869 + 95bba56
commit 15dbf22
Show file tree

Hide file tree

Showing 53 changed files with 2,679 additions and 2,502 deletions.
diff --git a/.vite/jisonTransformer.ts b/.vite/jisonTransformer.ts
@@ -1,8 +1,6 @@
-// @ts-ignore No typings for jison
 import jison from 'jison';
 
 export const transformJison = (src: string): string => {
-  // @ts-ignore No typings for jison
   const parser = new jison.Generator(src, {
     moduleType: 'js',
     'token-stack': true,

diff --git a/__mocks__/d3.ts b/__mocks__/d3.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck TODO: Fix TS
 import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
 
 export const select = function () {

diff --git a/cypress/integration/rendering/info.spec.js b/cypress/integration/rendering/info.spec.js
diff --git a/cypress/integration/rendering/info.spec.ts b/cypress/integration/rendering/info.spec.ts
@@ -0,0 +1,11 @@
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('info diagram', () => {
+  it('should handle an info definition', () => {
+    imgSnapshotTest(`info`);
+  });
+
+  it('should handle an info definition with showInfo', () => {
+    imgSnapshotTest(`info showInfo`);
+  });
+});
diff --git a/cypress/platform/info.html b/cypress/platform/info.html
diff --git a/demos/index.html b/demos/index.html
@@ -45,6 +45,9 @@ <h2><a href="./gantt.html">Gantt</a></h2>
       <li>
         <h2><a href="./git.html">Git</a></h2>
       </li>
+      <li>
+        <h2><a href="./info.html">Info</a></h2>
+      </li>
       <li>
         <h2><a href="./journey.html">Journey</a></h2>
       </li>
@@ -66,6 +69,9 @@ <h2><a href="./sequence.html">Sequence</a></h2>
       <li>
         <h2><a href="./state.html">State</a></h2>
       </li>
+      <li>
+        <h2><a href="./timeline.html">Timeline</a></h2>
+      </li>
       <li>
         <h2><a href="./zenuml.html">ZenUML</a></h2>
       </li>

diff --git a/demos/info.html b/demos/info.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Info diagram demos</h1>
+    <pre class="mermaid">
+      info
+    </pre>
+
+    <hr />
+    <pre class="mermaid">
+      info showInfo
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        theme: 'forest',
+        logLevel: 3,
+        securityLevel: 'loose',
+      });
+    </script>
+  </body>
+</html>
diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[mermaidAPI.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L98)
+[mermaidAPI.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L97)
 
 ---
 
@@ -51,4 +51,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[mermaidAPI.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L88)
+[mermaidAPI.ts:87](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L87)
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
@@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:82](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L82)
+[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81)
 
 ## Variables
 
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:670](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L670)
+[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:309](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L309)
+[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
 
 ---
 
@@ -153,7 +153,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:257](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L257)
+[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256)
 
 ---
 
@@ -179,7 +179,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L186)
+[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185)
 
 ---
 
@@ -202,7 +202,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:234](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L234)
+[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233)
 
 ---
 
@@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L170)
+[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169)
 
 ---
 
@@ -249,7 +249,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L156)
+[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)
 
 ---
 
@@ -269,7 +269,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L127)
+[mermaidAPI.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L126)
 
 ---
 
@@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:288](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L288)
+[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:359](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L359)
+[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)
diff --git a/packages/mermaid-example-diagram/src/detector.ts b/packages/mermaid-example-diagram/src/detector.ts
@@ -3,7 +3,7 @@ import type { ExternalDiagramDefinition } from 'mermaid';
 const id = 'example-diagram';
 
 const detector = (txt: string) => {
-  return txt.match(/^\s*example-diagram/) !== null;
+  return /^\s*example-diagram/.test(txt);
 };
 
 const loader = async () => {

diff --git a/packages/mermaid-zenuml/src/detector.ts b/packages/mermaid-zenuml/src/detector.ts
@@ -1,10 +1,9 @@
 import type { ExternalDiagramDefinition } from 'mermaid';
 
 const id = 'zenuml';
-const regexp = /^\s*zenuml/;
 
 const detector = (txt: string) => {
-  return txt.match(regexp) !== null;
+  return /^\s*zenuml/.test(txt);
 };
 
 const loader = async () => {

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
@@ -73,6 +73,7 @@
   "devDependencies": {
     "@types/cytoscape": "^3.19.9",
     "@types/d3": "^7.4.0",
+    "@types/d3-selection": "^3.0.5",
     "@types/dompurify": "^3.0.2",
     "@types/jsdom": "^21.1.1",
     "@types/lodash-es": "^4.17.7",

diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts
@@ -51,7 +51,6 @@ describe('accessibility', () => {
         desc: string | null | undefined,
         givenId: string
       ) {
-        // @ts-ignore Required to easily handle the d3 select types
         const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
         addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
         expect(svgAttrSpy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`);
@@ -63,7 +62,6 @@ describe('accessibility', () => {
         desc: string | null | undefined,
         givenId: string
       ) {
-        // @ts-ignore Required to easily handle the d3 select types
         const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
         addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
         expect(svgAttrSpy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`);

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -4,7 +4,7 @@ import flowchartV2 from '../diagrams/flowchart/flowDetector-v2.js';
 import er from '../diagrams/er/erDetector.js';
 import git from '../diagrams/git/gitGraphDetector.js';
 import gantt from '../diagrams/gantt/ganttDetector.js';
-import info from '../diagrams/info/infoDetector.js';
+import { info } from '../diagrams/info/infoDetector.js';
 import pie from '../diagrams/pie/pieDetector.js';
 import quadrantChart from '../diagrams/quadrant-chart/quadrantDetector.js';
 import requirement from '../diagrams/requirement/requirementDetector.js';

diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -7,6 +7,7 @@ import { addStylesForDiagram } from '../styles.js';
 import { DiagramDefinition, DiagramDetector } from './types.js';
 import * as _commonDb from '../commonDb.js';
 import { parseDirective as _parseDirective } from '../directiveUtils.js';
+import isEmpty from 'lodash-es/isEmpty.js';
 
 /*
   Packaging and exposing resources for external diagrams so that they can import
@@ -50,7 +51,9 @@ export const registerDiagram = (
   if (detector) {
     addDetector(id, detector);
   }
-  addStylesForDiagram(id, diagram.styles);
+  if (!isEmpty(diagram.styles)) {
+    addStylesForDiagram(id, diagram.styles);
+  }
 
   if (diagram.injectUtils) {
     diagram.injectUtils(

diff --git a/packages/mermaid/src/diagram-api/frontmatter.ts b/packages/mermaid/src/diagram-api/frontmatter.ts
@@ -1,4 +1,4 @@
-import { DiagramDb } from './types.js';
+import { DiagramDB } from './types.js';
 // The "* as yaml" part is necessary for tree-shaking
 import * as yaml from 'js-yaml';
 
@@ -22,7 +22,7 @@ type FrontMatterMetadata = {
  * @param db - Diagram database, could be of any diagram.
  * @returns text with frontmatter stripped out
  */
-export function extractFrontMatter(text: string, db: DiagramDb): string {
+export function extractFrontMatter(text: string, db: DiagramDB): string {
   const matches = text.match(frontMatterRegex);
   if (matches) {
     const parsed: FrontMatterMetadata = yaml.load(matches[1], {

diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
@@ -1,4 +1,6 @@
+import { Diagram } from '../Diagram.js';
 import { MermaidConfig } from '../config.type.js';
+import type * as d3 from 'd3';
 
 export interface InjectUtils {
   _log: any;
@@ -13,7 +15,7 @@ export interface InjectUtils {
 /**
  * Generic Diagram DB that may apply to any diagram type.
  */
-export interface DiagramDb {
+export interface DiagramDB {
   clear?: () => void;
   setDiagramTitle?: (title: string) => void;
   setDisplayMode?: (title: string) => void;
@@ -23,10 +25,10 @@ export interface DiagramDb {
 }
 
 export interface DiagramDefinition {
-  db: DiagramDb;
+  db: DiagramDB;
   renderer: any;
   parser: any;
-  styles: any;
+  styles?: any;
   init?: (config: MermaidConfig) => void;
   injectUtils?: (
     _log: InjectUtils['_log'],
@@ -52,3 +54,31 @@ export interface ExternalDiagramDefinition {
 
 export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
 export type DiagramLoader = () => Promise<{ id: string; diagram: DiagramDefinition }>;
+
+/**
+ * Type for function draws diagram in the tag with id: id based on the graph definition in text.
+ *
+ * @param text - The text of the diagram.
+ * @param id - The id of the diagram which will be used as a DOM element id.
+ * @param version - MermaidJS version from package.json.
+ * @param diagramObject - A standard diagram containing the DB and the text and type etc of the diagram.
+ */
+export type DrawDefinition = (
+  text: string,
+  id: string,
+  version: string,
+  diagramObject: Diagram
+) => void;
+
+/**
+ * Type for function parse directive from diagram code.
+ *
+ * @param statement -
+ * @param context -
+ * @param type -
+ */
+export type ParseDirectiveDefinition = (statement: string, context: string, type: string) => void;
+
+export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element, unknown>;
+
+export type SVG = d3.Selection<SVGSVGElement, unknown, Element, unknown>;