marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-08 18:16:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Detector registering itself on load

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-09-23 16:55:30 +02:00
parent c32e76a870
commit af2b1945a3
13 changed files with 194 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.vite/build.ts
View File

@@ -20,6 +20,10 @@ const packageOptions = {
}, },
'mermaid-mindmap': { 'mermaid-mindmap': {
name: 'mermaid-mindmap', name: 'mermaid-mindmap',
file: 'diagram.ts',
},
'mermaid-mindmap-detector': {
name: 'mermaid-mindmap-detector',
file: 'registry.ts', file: 'registry.ts',
}, },
}; };

68
cypress/platform/knsv.html
View File

@@ -165,47 +165,7 @@ graph TD
<pre class="mermaid" style="width: 100%"> <pre class="mermaid" style="width: 100%">
info info
</pre> </pre>
<pre class="mermaid" style="width: 100%">
requirementDiagram
accTitle: My req Diagram
accDescr: My req Diagram Description
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
functionalRequirement test_req2 {
id: 1.1
text: the second test text.
risk: low
verifymethod: inspection
}
performanceRequirement test_req3 {
id: 1.2
text: the third test text.
risk: medium
verifymethod: demonstration
}
element test_entity {
type: simulation
}
element test_entity2 {
type: word doc
docRef: reqs/test_entity
}
test_entity - satisfies -> test_req2
test_req - traces -> test_req2
test_req - contains -> test_req3
test_req <- copies - test_entity2
</pre>
<pre class="mermaid" style="width: 100%"> <pre class="mermaid" style="width: 100%">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@@ -320,29 +280,7 @@ flowchart TD
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car] C -->|Three| F[fa:fa-car Car]
</pre> </pre>
<pre class="mermaid" style="width: 100%">
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Animal <--o Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
</pre>
<pre class="mermaid" style="width: 100%"> <pre class="mermaid" style="width: 100%">
erDiagram erDiagram
CAR ||--o{ NAMED-DRIVER : allows CAR ||--o{ NAMED-DRIVER : allows
@@ -359,7 +297,9 @@ flowchart TD
} }
</pre> </pre>
<script src="./mermaid.js"></script> <!-- <script src="./mermaid.js"></script> -->
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap.js"></script>
<script src="./packages/mermaid/dist/mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);

22
cypress/platform/knsv2.html
View File

@@ -45,22 +45,14 @@
</head> </head>
<body> <body>
<div>Security check</div> <div>Security check</div>
<div class="flex">
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
flowchart TD mindmap
A[myClass1] --> B[default] & C[default] root
B[default] & C[default] --> D[myClass2] ch1
classDef default stroke-width:2px,fill:none,stroke:silver ch2
classDef node color:red </pre>
classDef myClass1 color:#0000ff <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap.js"></script>
classDef myClass2 stroke:#0000ff,fill:#ccccff <script src="./packages/mermaid/dist/mermaid.js"></script>
class A myClass1
class D myClass2
</pre
>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);

18
package.json
View File

@@ -28,24 +28,24 @@
"clean": "rimraf dist", "clean": "rimraf dist",
"build:vite": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts", "build:vite": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts",
"build:types": "concurrently \"tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly\" \"tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly\"", "build:types": "concurrently \"tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly\" \"tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly\"",
"build:watch": "yarn build:code --watch", "build:watch": "pnpm build:code --watch",
"build": "yarn clean; concurrently \"yarn build:vite\" \"yarn build:types\"", "build": "pnpm clean; concurrently \"pnpm build:vite\" \"pnpm build:types\"",
"dev": "concurrently \"yarn build:vite --watch\" \"ts-node-esm .vite/server\"", "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server\"",
"docs:build": "ts-node-esm --transpileOnly src/docs.mts", "docs:build": "ts-node-esm --transpileOnly src/docs.mts",
"docs:verify": "yarn docs:build --verify", "docs:verify": "pnpm docs:build --verify",
"todo-postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md", "todo-postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md",
"release": "yarn build", "release": "pnpm build",
"lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .", "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
"lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .", "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
"lint:jison": "ts-node-esm --transpileOnly src/jison/lint.mts", "lint:jison": "ts-node-esm --transpileOnly src/jison/lint.mts",
"cypress": "cypress run", "cypress": "cypress run",
"cypress:open": "cypress open", "cypress:open": "cypress open",
"e2e": "start-server-and-test dev http://localhost:9000/ cypress", "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
"ci": "vitest run", "ci": "vitest run",
"test": "yarn lint && vitest run", "test": "pnpm lint && vitest run",
"test:watch": "vitest --coverage --watch", "test:watch": "vitest --coverage --watch",
"prepublishOnly": "yarn build && yarn test", "prepublishOnly": "pnpm build && pnpm test",
"todo-prepare": "concurrently \"husky install\" \"yarn build\"", "todo-prepare": "concurrently \"husky install\" \"pnpm build\"",
"pre-commit": "lint-staged" "pre-commit": "lint-staged"
}, },
"repository": { "repository": {

75
packages/mermaid-mindmap-detector/package.json Normal file
View File

@@ -0,0 +1,75 @@
{
"name": "@mermaid-js/mermaid-mindmap",
"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-mindmap.min.js",
"import": "./dist/mermaid-mindmap.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": {
"@braintree/sanitize-url": "^6.0.0",
"d3": "^7.0.0",
"mermaid": "workspace:*",
"non-layered-tidy-tree-layout": "^2.0.2"
},
"devDependencies": {
"concurrently": "^7.4.0",
"rimraf": "^3.0.2"
},
"resolutions": {
"d3": "^7.0.0"
},
"files": [
"dist"
],
"sideEffects": [
"**/*.css",
"**/*.scss"
]
}

8
packages/mermaid-mindmap-detector/src/mindmapDetector.ts Normal file
View File

@@ -0,0 +1,8 @@
// import type { DiagramDetector } from '../../diagram-api/detectType';
// export const mindmapDetector: DiagramDetector = (txt) => {
// return txt.match(/^\s*mindmap/) !== null;
// };
export const mindmapDetector = (txt: string) => {
return txt.match(/^\s*mindmap/) !== null;
};

18
packages/mermaid-mindmap-detector/src/registry.ts Normal file
View File

@@ -0,0 +1,18 @@
// @ts-ignore: TODO Fix ts errors
import { mindmapDetector } from './mindmapDetector';
if (typeof document !== 'undefined') {
/*!
* Wait for document loaded before starting the execution
*/
window.addEventListener(
'load',
() => {
if (window.mermaid && typeof window.mermaid.detectors === 'object') {
window.mermaid.detectors.push(mindmapDetector);
console.log(window.mermaid.detectors); // eslint-disable-line no-console
}
},
false
);
}

9
packages/mermaid-mindmap-detector/tsconfig.json Normal file
View File

@@ -0,0 +1,9 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist"
},
"include": ["./src/**/*.ts"],
"typeRoots": ["./src/types"]
}

26
packages/mermaid-mindmap/src/diagram.ts Normal file
View File

@@ -0,0 +1,26 @@
// @ts-ignore: TODO Fix ts errors
import mindmapParser from './parser/mindmap';
import * as mindmapDb from './mindmapDb';
import mindmapRenderer from './mindmapRenderer';
import mindmapStyles from './styles';
// import mermaid from 'mermaid';
// console.log('mindmapDb', mindmapDb.getMindmap()); // eslint-disable-line no-console
// registerDiagram()
if (typeof document !== 'undefined') {
/*!
* Wait for document loaded before starting the execution
*/
window.addEventListener(
'load',
() => {
if (window.mermaid && typeof window.mermaid.detectors === 'object') {
// window.mermaid.detectors.push(mindmapDetector);
console.log(window.mermaid.detectors); // eslint-disable-line no-console
}
},
false
);
}

25
packages/mermaid-mindmap/src/registry.ts
View File

@@ -1,12 +1,27 @@
// @ts-ignore: TODO Fix ts errors // @ts-ignore: TODO Fix ts errors
import mindmapParser from './parser/mindmap'; // import mindmapParser from './parser/mindmap';
// import * as mindmapDb from './mindmapDb'; // import * as mindmapDb from './mindmapDb';
import { mindmapDetector } from './mindmapDetector'; import { mindmapDetector } from './mindmapDetector';
import mindmapRenderer from './mindmapRenderer'; // import mindmapRenderer from './mindmapRenderer';
import mindmapStyles from './styles'; // import mindmapStyles from './styles';
import mermaid from 'mermaid'; import mermaid from 'mermaid';
console.log('Test of import', mermaid.mermaidAPI.getConfig()); // eslint-disable-line no-console console.log('mindmapDb', mermaid.mermaidAPI.getConfig()); // eslint-disable-line no-console
// console.log('mindmapDb', mindmapDb.getMindmap()); // eslint-disable-line no-console
// registerDiagram() // registerDiagram()
// if (typeof document !== 'undefined') {
// /*!
// * Wait for document loaded before starting the execution
// */
// window.addEventListener(
// 'load',
// () => {
// if (window.mermaid && typeof window.mermaid.detectors === 'object') {
// window.mermaid.detectors.push(mindmapDetector);
// console.log(window.mermaid.detectors); // eslint-disable-line no-console
// }
// },
// false
// );
// }

7
packages/mermaid-mindmap/src/types/index.d.ts vendored Normal file
View File

@@ -0,0 +1,7 @@
export {};
declare global {
interface Window {
mermaid: any; // 👈️ turn off type checking
}
}

3
packages/mermaid-mindmap/tsconfig.json
View File

@@ -4,5 +4,6 @@
"rootDir": "./src", "rootDir": "./src",
"outDir": "./dist" "outDir": "./dist"
}, },
"include": ["./src/**/*.ts"] "include": ["./src/**/*.ts"],
"typeRoots": ["./src/types"]
} }

5
packages/mermaid/src/mermaid.ts
View File

@@ -1,6 +1,6 @@
/** /**
* Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
* functionality and to render the diagrams to svg code. * functionality and to render the diagrams to svg code!
*/ */
import { MermaidConfig } from './config.type'; import { MermaidConfig } from './config.type';
import { log } from './logger'; import { log } from './logger';
@@ -210,6 +210,8 @@ const mermaid: {
initialize: typeof initialize; initialize: typeof initialize;
contentLoaded: typeof contentLoaded; contentLoaded: typeof contentLoaded;
setParseErrorHandler: typeof setParseErrorHandler; setParseErrorHandler: typeof setParseErrorHandler;
// Array of functions to use for detecting diagram types
detectors: Array<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
} = { } = {
startOnLoad: true, startOnLoad: true,
diagrams: {}, diagrams: {},
@@ -222,6 +224,7 @@ const mermaid: {
parseError: undefined, parseError: undefined,
contentLoaded, contentLoaded,
setParseErrorHandler, setParseErrorHandler,
detectors: [],
}; };
export default mermaid; export default mermaid;