marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 14:29:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Mind map coming in from the cold. A lazy loaded diagram in the same way as timeline.

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-02-08 17:42:58 +01:00
parent 38a84a7fe0
commit 74df4a7a68
34 changed files with 206 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.vite/build.ts
View File

@@ -36,9 +36,9 @@ const packageOptions = {
packageName: 'mermaid', packageName: 'mermaid',
file: 'mermaid.ts', file: 'mermaid.ts',
}, },
'mermaid-mindmap': { 'mermaid-example-diagram': {
name: 'mermaid-mindmap', name: 'mermaid-example-diagram',
packageName: 'mermaid-mindmap', packageName: 'mermaid-example-diagram',
file: 'detector.ts', file: 'detector.ts',
}, },
}; };
@@ -114,7 +114,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
if (watch && config.build) { if (watch && config.build) {
config.build.watch = { config.build.watch = {
include: ['packages/mermaid-mindmap/src/**', 'packages/mermaid/src/**'], include: ['packages/mermaid-example-diagram/src/**', 'packages/mermaid/src/**'],
}; };
} }
@@ -139,7 +139,7 @@ const main = async () => {
if (watch) { if (watch) {
build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' })); build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
if (!mermaidOnly) { if (!mermaidOnly) {
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
} }
} else if (visualize) { } else if (visualize) {
await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' })); await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));

2
.vite/server.ts
View File

@@ -22,7 +22,7 @@ async function createServer() {
app.use(cors); app.use(cors);
app.use(express.static('./packages/mermaid/dist')); app.use(express.static('./packages/mermaid/dist'));
// app.use(express.static('./packages/mermaid-example-diagram/dist')); // app.use(express.static('./packages/mermaid-example-diagram/dist'));
app.use(express.static('./packages/mermaid-mindmap/dist')); app.use(express.static('./packages/mermaid-example-diagram/dist'));
app.use(vite.middlewares); app.use(vite.middlewares);
app.use(express.static('demos')); app.use(express.static('demos'));
app.use(express.static('cypress/platform')); app.use(express.static('cypress/platform'));

4
cypress/integration/other/external-diagrams.spec.js
View File

@@ -2,8 +2,8 @@ import { urlSnapshotTest } from '../../helpers/util';
describe('mermaid', () => { describe('mermaid', () => {
describe('registerDiagram', () => { describe('registerDiagram', () => {
it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => { it('should work on @mermaid-js/mermaid-example-diagram', () => {
const url = 'http://localhost:9000/external-diagrams-mindmap.html'; const url = 'http://localhost:9000/external-diagrams-example-diagram.html';
urlSnapshotTest(url, {}, false, false); urlSnapshotTest(url, {}, false, false);
}); });
}); });

32
cypress/platform/external-diagrams-mindmap.html → cypress/platform/external-diagrams-example-diagram.html
View File

@@ -2,34 +2,8 @@
<body> <body>
<h1>Should correctly load a third-party diagram using registerDiagram</h1> <h1>Should correctly load a third-party diagram using registerDiagram</h1>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
mindmap example-diagram
root
A
B
C
D
E
A2
B2
C2
D2
E2
child1((Circle))
grandchild 1
grandchild 2
child2(Round rectangle)
grandchild 3
grandchild 4
child3[Square]
grandchild 5
::icon(mdi mdi-fire)
gc6((grand<br/>child 6))
::icon(mdi mdi-fire)
gc7((grand<br/>grand<br/>child 8))
</pre> </pre>
<!-- <pre id="diagram" class="mermaid2">
example-diagram
</pre> -->
<!-- <div id="cy"></div> --> <!-- <div id="cy"></div> -->
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> --> <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
@@ -37,11 +11,11 @@ mindmap
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> --> <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
<!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> --> <!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
<script type="module"> <script type="module">
import mindmap from '../../packages/mermaid-mindmap/src/detector'; import exampleDiagram from '../../packages/mermaid-example-diagram/src/detector';
// import example from '../../packages/mermaid-example-diagram/src/detector'; // import example from '../../packages/mermaid-example-diagram/src/detector';
import mermaid from '../../packages/mermaid/src/mermaid'; import mermaid from '../../packages/mermaid/src/mermaid';
await mermaid.registerExternalDiagrams([mindmap]); await mermaid.registerExternalDiagrams([exampleDiagram]);
await mermaid.initialize({ logLevel: 0 }); await mermaid.initialize({ logLevel: 0 });
await mermaid.initThrowsErrorsAsync(); await mermaid.initThrowsErrorsAsync();
if (window.Cypress) { if (window.Cypress) {

12
cypress/platform/knsv2.html
View File

@@ -246,6 +246,10 @@ mindmap
Pen and paper Pen and paper
Mermaid Mermaid
</pre> </pre>
<br />
<pre id="diagram" class="mermaid">
example-diagram
</pre>
<!-- <div id="cy"></div> --> <!-- <div id="cy"></div> -->
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> --> <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
@@ -254,15 +258,15 @@ mindmap
<!-- <script src="./mermaid.js"></script> --> <!-- <script src="./mermaid.js"></script> -->
<script type="module"> <script type="module">
import mindmap from '../../packages/mermaid-mindmap/src/detector'; // import mindmap from '../../packages/mermaid-mindmap/src/detector';
// import example from '../../packages/mermaid-example-diagram/src/detector'; import example from '../../packages/mermaid-example-diagram/src/detector';
import mermaid from '../../packages/mermaid/src/mermaid'; import mermaid from '../../packages/mermaid/src/mermaid';
await mermaid.registerExternalDiagrams([mindmap]); await mermaid.registerExternalDiagrams([example]);
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
theme: 'dark', theme: 'forest',
startOnLoad: true, startOnLoad: true,
logLevel: 0, logLevel: 0,
flowchart: { flowchart: {

142
cypress/platform/knsv3.html
View File

@@ -1,81 +1,93 @@
<html> <!DOCTYPE html>
<html lang="en">
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" /> <meta charset="utf-8" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link <title>Mindmap Mermaid Quick Test Page</title>
rel="stylesheet" <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<style> <style>
body { div.mermaid {
/* background: rgb(221, 208, 208); */ /* font-family: 'trebuchet ms', verdana, arial; */
/* background:#333; */ font-family: 'Courier New', Courier, monospace !important;
font-family: 'Arial';
/* font-size: 18px !important; */
}
h1 {
color: grey;
}
.mermaid2 {
display: none;
}
.mermaid svg {
/* font-size: 18px !important; */
background-color: #eee;
background-image: radial-gradient(#fff 1%, transparent 11%),
radial-gradient(#fff 1%, transparent 11%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
background-repeat: repeat;
}
.malware {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 150px;
background: red;
color: black;
display: flex;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
font-size: 72px;
} }
</style> </style>
</head> </head>
<body> <body>
<div>Security check</div> <h1>Mindmap diagram demo</h1>
<pre id="diagram" class="mermaid"> <pre class="mermaid">
graph TD mindmap
A["test"] --"<p><style> * { display : none}</style>test</p>"--> B root
child1((Circle))
grandchild 1
grandchild 2
child2(Round rectangle)
grandchild 3
grandchild 4
child3[Square]
grandchild 5
::icon(mdi mdi-fire)
gc6((grand<br/>child 6))
::icon(mdi mdi-fire)
gc7((grand<br/>grand<br/>child 8))
</pre> </pre>
<!-- <div id="cy"></div> --> <h2>Mindmap with root wrapping text and a shape</h2>
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> --> <pre class="mermaid">
<!-- <script src="./mermaid-example-diagram-detector.js"></script> --> mindmap
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> --> root[A root with a long text that wraps to keep the node size in check]
<!-- <script src="./mermaid.js"></script> --> </pre>
<script type="module"> <script type="module">
import mindmap from '../../packages/mermaid-mindmap/src/detector'; // import mermaid from './mermaid.esm.mjs';
// import example from '../../packages/mermaid-example-diagram/src/detector';
import mermaid from '../../packages/mermaid/src/mermaid'; import mermaid from '../../packages/mermaid/src/mermaid';
await mermaid.registerExternalDiagrams([mindmap]); // import mermaidMindmap from './mermaid-mindmap.esm.mjs';
// import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';
// await mermaid.registerExternalDiagrams([mermaidMindmap]);
const ALLOWED_TAGS = [
'a',
'b',
'blockquote',
'br',
'dd',
'div',
'dl',
'dt',
'em',
'foreignObject',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'h7',
'h8',
'hr',
'i',
'li',
'ul',
'ol',
'p',
'pre',
'span',
'strike',
'strong',
'table',
'tbody',
'td',
'tfoot',
'th',
'thead',
'tr',
];
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
theme: 'default', theme: 'base',
startOnLoad: true, startOnLoad: true,
logLevel: 0, logLevel: 0,
flowchart: { flowchart: {
@@ -94,10 +106,6 @@
console.error('In parse error:'); console.error('In parse error:');
console.error(err); console.error(err);
}; };
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
</script> </script>
</body> </body>
</html> </html>

4
cypress/platform/viewer.js
View File

@@ -1,5 +1,5 @@
import mermaid2 from '../../packages/mermaid/src/mermaid'; import mermaid2 from '../../packages/mermaid/src/mermaid';
import mindmap from '../../packages/mermaid-mindmap/src/detector'; import externalExample from '../../packages/mermaid-example-diagram/src/detector';
function b64ToUtf8(str) { function b64ToUtf8(str) {
return decodeURIComponent(escape(window.atob(str))); return decodeURIComponent(escape(window.atob(str)));
@@ -44,7 +44,7 @@ const contentLoaded = async function () {
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
await mermaid2.registerExternalDiagrams([mindmap]); await mermaid2.registerExternalDiagrams([externalExample]);
mermaid2.initialize(graphObj.mermaid); mermaid2.initialize(graphObj.mermaid);
await mermaid2.init(); await mermaid2.init();
markRendered(); markRendered();

2
package.json
View File

@@ -18,7 +18,7 @@
"build:vite": "ts-node-esm --transpileOnly .vite/build.ts", "build:vite": "ts-node-esm --transpileOnly .vite/build.ts",
"build:mermaid": "pnpm build:vite --mermaid", "build:mermaid": "pnpm build:vite --mermaid",
"build:viz": "pnpm build:mermaid --visualize", "build:viz": "pnpm build:mermaid --visualize",
"build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly", "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagran/tsconfig.json --emitDeclarationOnly",
"build:watch": "pnpm build:vite --watch", "build:watch": "pnpm build:vite --watch",
"build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"", "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"",
"dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"", "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",

3
packages/mermaid-example-diagram/Readme.md
View File

@@ -1,3 +0,0 @@
### Do not refer this package. It is not ready.
### Refer mermaid-mindmap instead.

39
packages/mermaid-example-diagram/package.json
View File

@@ -1,36 +1,25 @@
{ {
"name": "@mermaid-js/mermaid-example-diagram", "name": "@mermaid-js/mermaid-example-diagram",
"version": "9.2.0-rc2", "version": "9.3.0",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "description": "Example of external diagram module for MermaidJS.",
"main": "dist/mermaid-mindmap.core.mjs", "module": "dist/mermaid-example-diagram.core.mjs",
"module": "dist/mermaid-mindmap.core.mjs", "types": "dist/detector.d.ts",
"type": "module", "type": "module",
"exports": { "exports": {
".": { ".": {
"require": "./dist/mermaid-example-diagram.min.js", "import": "./dist/mermaid-example-diagram.core.mjs",
"import": "./dist/mermaid-example-diagram.core.mjs" "types": "./dist/detector.d.ts"
}, },
"./*": "./*" "./*": "./*"
}, },
"keywords": [ "keywords": [
"diagram", "diagram",
"markdown", "markdown",
"mindmap", "example",
"mermaid" "mermaid"
], ],
"scripts": { "scripts": {
"clean": "rimraf dist", "prepublishOnly": "pnpm -w run build"
"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",
"todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
"todo-pre-commit": "lint-staged"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@@ -48,9 +37,19 @@
"page" "page"
] ]
}, },
"dependencies": {}, "dependencies": {
"@braintree/sanitize-url": "^6.0.0",
"cytoscape": "^3.23.0",
"cytoscape-cose-bilkent": "^4.1.0",
"cytoscape-fcose": "^2.1.0",
"d3": "^7.0.0",
"khroma": "^2.0.0",
"non-layered-tidy-tree-layout": "^2.0.2"
},
"devDependencies": { "devDependencies": {
"@types/cytoscape": "^3.19.9",
"concurrently": "^7.5.0", "concurrently": "^7.5.0",
"mermaid": "workspace:*",
"rimraf": "^3.0.2" "rimraf": "^3.0.2"
}, },
"resolutions": { "resolutions": {

22
packages/mermaid-example-diagram/src/detector.ts
View File

@@ -1,18 +1,20 @@
// @ts-ignore: TODO Fix ts errors import type { ExternalDiagramDefinition } from 'mermaid';
export const id = 'example-diagram';
/** const id = 'example-diagram';
* Detector function that will be called by mermaid to determine if the diagram is this type of diagram.
*
* @param txt - The diagram text will be passed to the detector
* @returns True if the diagram text matches a diagram of this type
*/
export const detector = (txt: string) => { const detector = (txt: string) => {
return txt.match(/^\s*example-diagram/) !== null; return txt.match(/^\s*example-diagram/) !== null;
}; };
export const loadDiagram = async () => { const loader = async () => {
const { diagram } = await import('./diagram-definition'); const { diagram } = await import('./diagram-definition');
return { id, diagram }; return { id, diagram };
}; };
const plugin: ExternalDiagramDefinition = {
id,
detector,
loader,
};
export default plugin;

2
packages/mermaid-example-diagram/src/diagram-definition.ts
View File

@@ -12,5 +12,3 @@ export const diagram = {
styles, styles,
injectUtils, injectUtils,
}; };
export { detector, id } from './detector';

14
packages/mermaid-example-diagram/src/exampleDiagram.spec.js
View File

@@ -1,5 +1,17 @@
import { parser } from './parser/exampleDiagram'; import { parser } from './parser/exampleDiagram';
import db from './exampleDiagramDb'; import * as db from './exampleDiagramDb';
import { injectUtils } from './mermaidUtils';
// Todo fix utils functions for tests
import {
log,
setLogLevel,
getConfig,
sanitizeText,
setupGraphViewBox,
} from '../../mermaid/src/diagram-api/diagramAPI';
injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox);
describe('when parsing an info graph it', function () { describe('when parsing an info graph it', function () {
let ex; let ex;
beforeEach(function () { beforeEach(function () {

32
packages/mermaid-example-diagram/src/mermaidUtils.ts
View File

@@ -1,4 +1,8 @@
const warning = () => null; const warning = (s: string) => {
// Todo remove debug code
// eslint-disable-next-line no-console
console.error('Log function was called before initialization', s);
};
export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal'; export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
@@ -19,13 +23,11 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
error: warning, error: warning,
fatal: warning, fatal: warning,
}; };
export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void; export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
export let getConfig: () => object; export let getConfig: () => object;
export let sanitizeText: (str: string) => string; export let sanitizeText: (str: string) => string;
export let commonDb: any; export let commonDb: () => object;
/**
* Placeholder for the real function that will be injected by mermaid.
*/
// eslint-disable @typescript-eslint/no-explicit-any // eslint-disable @typescript-eslint/no-explicit-any
export let setupGraphViewbox: ( export let setupGraphViewbox: (
graph: any, graph: any,
@@ -34,25 +36,15 @@ export let setupGraphViewbox: (
useMaxWidth: boolean useMaxWidth: boolean
) => void; ) => void;
/**
* Function called by mermaid that injects utility functions that help the diagram to be a good citizen.
*
* @param _log - log from mermaid/src/diagramAPI.ts
* @param _setLogLevel - setLogLevel from mermaid/src/diagramAPI.ts
* @param _getConfig - getConfig from mermaid/src/diagramAPI.ts
* @param _sanitizeText - sanitizeText from mermaid/src/diagramAPI.ts
* @param _setupGraphViewbox - setupGraphViewbox from mermaid/src/diagramAPI.ts
* @param _commonDb -`commonDb` from mermaid/src/diagramAPI.ts
*/
export const injectUtils = ( export const injectUtils = (
_log: Record<keyof typeof LEVELS, typeof console.log>, _log: Record<keyof typeof LEVELS, typeof console.log>,
_setLogLevel: typeof setLogLevel, _setLogLevel: any,
_getConfig: typeof getConfig, _getConfig: any,
_sanitizeText: typeof sanitizeText, _sanitizeText: any,
_setupGraphViewbox: typeof setupGraphViewbox, _setupGraphViewbox: any,
_commonDb: any _commonDb: any
) => { ) => {
_log.info('Mermaid utils injected into timeline-diagram'); _log.info('Mermaid utils injected');
log.trace = _log.trace; log.trace = _log.trace;
log.debug = _log.debug; log.debug = _log.debug;
log.info = _log.info; log.info = _log.info;

1
packages/mermaid-example-diagram/tsconfig.json
View File

@@ -1,5 +1,6 @@
{ {
"extends": "../../tsconfig.json", "extends": "../../tsconfig.json",
"module": "esnext",
"compilerOptions": { "compilerOptions": {
"rootDir": "./src", "rootDir": "./src",
"outDir": "./dist" "outDir": "./dist"

65
packages/mermaid-mindmap/package.json
View File

@@ -1,65 +0,0 @@
{
"name": "@mermaid-js/mermaid-mindmap",
"version": "9.3.0",
"description": "Mindmap diagram module for MermaidJS.",
"module": "dist/mermaid-mindmap.core.mjs",
"types": "dist/detector.d.ts",
"type": "module",
"exports": {
".": {
"import": "./dist/mermaid-mindmap.core.mjs",
"types": "./dist/detector.d.ts"
},
"./*": "./*"
},
"keywords": [
"diagram",
"markdown",
"mindmap",
"mermaid"
],
"scripts": {
"prepublishOnly": "pnpm -w run build"
},
"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",
"cytoscape": "^3.23.0",
"cytoscape-cose-bilkent": "^4.1.0",
"cytoscape-fcose": "^2.1.0",
"d3": "^7.0.0",
"khroma": "^2.0.0",
"non-layered-tidy-tree-layout": "^2.0.2"
},
"devDependencies": {
"@types/cytoscape": "^3.19.9",
"concurrently": "^7.5.0",
"mermaid": "workspace:*",
"rimraf": "^3.0.2"
},
"resolutions": {
"d3": "^7.0.0"
},
"files": [
"dist"
],
"sideEffects": [
"**/*.css",
"**/*.scss"
]
}

59
packages/mermaid-mindmap/src/mermaidUtils.ts
View File

@@ -1,59 +0,0 @@
const warning = (s: string) => {
// Todo remove debug code
// eslint-disable-next-line no-console
console.error('Log function was called before initialization', s);
};
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;
export let commonDb: () => object;
// eslint-disable @typescript-eslint/no-explicit-any
export let setupGraphViewbox: (
graph: any,
svgElem: any,
padding: any,
useMaxWidth: boolean
) => void;
export const injectUtils = (
_log: Record<keyof typeof LEVELS, typeof console.log>,
_setLogLevel: any,
_getConfig: any,
_sanitizeText: any,
_setupGraphViewbox: any,
_commonDb: any
) => {
_log.info('Mermaid utils injected');
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;
commonDb = _commonDb;
};

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

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

4
packages/mermaid/package.json
View File

@@ -53,6 +53,9 @@
}, },
"dependencies": { "dependencies": {
"@braintree/sanitize-url": "^6.0.0", "@braintree/sanitize-url": "^6.0.0",
"cytoscape": "^3.23.0",
"cytoscape-cose-bilkent": "^4.1.0",
"cytoscape-fcose": "^2.1.0",
"d3": "^7.0.0", "d3": "^7.0.0",
"dagre-d3-es": "7.0.8", "dagre-d3-es": "7.0.8",
"dompurify": "2.4.3", "dompurify": "2.4.3",
@@ -66,6 +69,7 @@
"uuid": "^9.0.0" "uuid": "^9.0.0"
}, },
"devDependencies": { "devDependencies": {
"@types/cytoscape": "^3.19.9",
"@types/d3": "^7.4.0", "@types/d3": "^7.4.0",
"@types/dompurify": "^2.4.0", "@types/dompurify": "^2.4.0",
"@types/jsdom": "^20.0.1", "@types/jsdom": "^20.0.1",

5
packages/mermaid/src/diagram-api/detectType.ts
View File

@@ -55,9 +55,10 @@ export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinitio
export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => { export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => {
if (detectors[key]) { if (detectors[key]) {
throw new Error(`Detector with key ${key} already exists`); log.error(`Detector with key ${key} already exists`);
} else {
detectors[key] = { detector, loader };
} }
detectors[key] = { detector, loader };
log.debug(`Detector with key ${key} added${loader ? ' with loader' : ''}`); log.debug(`Detector with key ${key} added${loader ? ' with loader' : ''}`);
}; };

5
packages/mermaid/src/diagram-api/diagram-orchestration.ts
View File

@@ -96,7 +96,10 @@ import errorStyles from '../diagrams/error/styles';
import flowchartElk from '../diagrams/flowchart/elk/detector'; import flowchartElk from '../diagrams/flowchart/elk/detector';
import { registerLazyLoadedDiagrams } from './detectType'; import { registerLazyLoadedDiagrams } from './detectType';
// Lazy loaded diagrams
import timelineDetector from '../diagrams/timeline/detector'; import timelineDetector from '../diagrams/timeline/detector';
import mindmapDetector from '../diagrams/mindmap/detector';
let hasLoadedDiagrams = false; let hasLoadedDiagrams = false;
export const addDiagrams = () => { export const addDiagrams = () => {
if (hasLoadedDiagrams) { if (hasLoadedDiagrams) {
@@ -105,7 +108,7 @@ export const addDiagrams = () => {
// This is added here to avoid race-conditions. // This is added here to avoid race-conditions.
// We could optimize the loading logic somehow. // We could optimize the loading logic somehow.
hasLoadedDiagrams = true; hasLoadedDiagrams = true;
registerLazyLoadedDiagrams(flowchartElk, timelineDetector); registerLazyLoadedDiagrams(flowchartElk, timelineDetector, mindmapDetector);
registerDiagram( registerDiagram(
'error', 'error',

3
packages/mermaid-mindmap/src/detector.ts → packages/mermaid/src/diagrams/mindmap/detector.ts
View File

@@ -1,5 +1,4 @@
import type { ExternalDiagramDefinition } from 'mermaid'; import type { ExternalDiagramDefinition } from '../../diagram-api/types';
const id = 'mindmap'; const id = 'mindmap';
const detector = (txt: string) => { const detector = (txt: string) => {

2
packages/mermaid-mindmap/src/diagram-definition.ts → packages/mermaid/src/diagrams/mindmap/diagram-definition.ts
View File

@@ -3,12 +3,10 @@ import mindmapParser from './parser/mindmap';
import * as mindmapDb from './mindmapDb'; import * as mindmapDb from './mindmapDb';
import mindmapRenderer from './mindmapRenderer'; import mindmapRenderer from './mindmapRenderer';
import mindmapStyles from './styles'; import mindmapStyles from './styles';
import { injectUtils } from './mermaidUtils';
export const diagram = { export const diagram = {
db: mindmapDb, db: mindmapDb,
renderer: mindmapRenderer, renderer: mindmapRenderer,
parser: mindmapParser, parser: mindmapParser,
styles: mindmapStyles, styles: mindmapStyles,
injectUtils,
}; };

14
packages/mermaid-mindmap/src/mindmap.spec.js → packages/mermaid/src/diagrams/mindmap/mindmap.spec.js
View File

@@ -1,16 +1,16 @@
import { parser as mindmap } from './parser/mindmap'; import { parser as mindmap } from './parser/mindmap';
import * as mindmapDB from './mindmapDb'; import * as mindmapDB from './mindmapDb';
import { injectUtils } from './mermaidUtils'; // import { injectUtils } from './mermaidUtils';
// Todo fix utils functions for tests // Todo fix utils functions for tests
import { import {
log, // log,
setLogLevel, setLogLevel,
getConfig, // getConfig,
sanitizeText, // sanitizeText,
setupGraphViewBox, // setupGraphViewBox,
} from '../../mermaid/src/diagram-api/diagramAPI'; } from '../../diagram-api/diagramAPI';
injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox); // injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox);
describe('when parsing a mindmap ', function () { describe('when parsing a mindmap ', function () {
beforeEach(function () { beforeEach(function () {

7
packages/mermaid-mindmap/src/mindmapDb.js → packages/mermaid/src/diagrams/mindmap/mindmapDb.js
View File

@@ -1,5 +1,8 @@
/** Created by knut on 15-01-14. */ import { getConfig } from '../../config';
import { sanitizeText, getConfig, log } from './mermaidUtils'; import { sanitizeText as _sanitizeText } from '../../diagrams/common/common';
import { log } from '../../logger';
export const sanitizeText = (text) => _sanitizeText(text, getConfig());
let nodes = []; let nodes = [];
let cnt = 0; let cnt = 0;

4
packages/mermaid-mindmap/src/mindmapRenderer.js → packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
View File

@@ -1,6 +1,8 @@
/** Created by knut on 14-12-11. */ /** Created by knut on 14-12-11. */
import { select } from 'd3'; import { select } from 'd3';
import { log, getConfig, setupGraphViewbox } from './mermaidUtils'; import { log } from '../../logger';
import { getConfig } from '../../config';
import { setupGraphViewbox } from '../../setupGraphViewbox';
import svgDraw from './svgDraw'; import svgDraw from './svgDraw';
import cytoscape from 'cytoscape'; import cytoscape from 'cytoscape';
import coseBilkent from 'cytoscape-cose-bilkent'; import coseBilkent from 'cytoscape-cose-bilkent';

0
packages/mermaid-mindmap/src/parser/mindmap.jison → packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
View File

0
packages/mermaid-mindmap/src/styles.js → packages/mermaid/src/diagrams/mindmap/styles.js
View File

0
packages/mermaid-mindmap/src/svgDraw.js → packages/mermaid/src/diagrams/mindmap/svgDraw.js
View File

0
packages/mermaid-mindmap/src/types/index.d.ts → packages/mermaid/src/diagrams/mindmap/types/index.d.ts vendored
View File

4
packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
View File

@@ -1,10 +1,10 @@
import mermaid, { type MermaidConfig } from 'mermaid'; import mermaid, { type MermaidConfig } from 'mermaid';
import mindmap from '@mermaid-js/mermaid-mindmap'; // import mindmap from '@mermaid-js/mermaid-mindmap';
// import timeline from '@mermaid-js/mermaid-timeline'; // import timeline from '@mermaid-js/mermaid-timeline';
const init = (async () => { const init = (async () => {
try { try {
await mermaid.registerExternalDiagrams([mindmap, timeline]); await mermaid.registerExternalDiagrams([]);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }

4
packages/mermaid/src/docs/vite.config.ts
View File

@@ -32,9 +32,9 @@ export default defineConfig({
alias: { alias: {
mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build
'@mermaid-js/mermaid-mindmap': path.join( '@mermaid-js/mermaid-example-diagram': path.join(
__dirname, __dirname,
'../../../mermaid-mindmap/dist/mermaid-mindmap.esm.min.mjs' '../../../mermaid-example-diagram/dist/mermaid-example-diagram.esm.min.mjs'
), // Use this one to build ), // Use this one to build
// '@mermaid-js/mermaid-timeline': path.join( // '@mermaid-js/mermaid-timeline': path.join(
// __dirname, // __dirname,

41
pnpm-lock.yaml generated
View File

@@ -169,6 +169,15 @@ importers:
'@braintree/sanitize-url': '@braintree/sanitize-url':
specifier: ^6.0.0 specifier: ^6.0.0
version: 6.0.0 version: 6.0.0
cytoscape:
specifier: ^3.23.0
version: 3.23.0
cytoscape-cose-bilkent:
specifier: ^4.1.0
version: 4.1.0_cytoscape@3.23.0
cytoscape-fcose:
specifier: ^2.1.0
version: 2.1.0_cytoscape@3.23.0
d3: d3:
specifier: ^7.0.0 specifier: ^7.0.0
version: 7.6.1 version: 7.6.1
@@ -203,6 +212,9 @@ importers:
specifier: ^9.0.0 specifier: ^9.0.0
version: 9.0.0 version: 9.0.0
devDependencies: devDependencies:
'@types/cytoscape':
specifier: ^3.19.9
version: 3.19.9
'@types/d3': '@types/d3':
specifier: ^7.4.0 specifier: ^7.4.0
version: 7.4.0 version: 7.4.0
@@ -304,15 +316,6 @@ importers:
version: 1.0.4-alpha.16_ifjhkyx3os4sbm7zdnvthc52am version: 1.0.4-alpha.16_ifjhkyx3os4sbm7zdnvthc52am
packages/mermaid-example-diagram: packages/mermaid-example-diagram:
devDependencies:
concurrently:
specifier: ^7.5.0
version: 7.5.0
rimraf:
specifier: ^3.0.2
version: 3.0.2
packages/mermaid-mindmap:
dependencies: dependencies:
'@braintree/sanitize-url': '@braintree/sanitize-url':
specifier: ^6.0.0 specifier: ^6.0.0
@@ -328,7 +331,7 @@ importers:
version: 2.1.0_cytoscape@3.23.0 version: 2.1.0_cytoscape@3.23.0
d3: d3:
specifier: ^7.0.0 specifier: ^7.0.0
version: 7.6.1 version: 7.8.2
khroma: khroma:
specifier: ^2.0.0 specifier: ^2.0.0
version: 2.0.0 version: 2.0.0
@@ -349,27 +352,23 @@ importers:
specifier: ^3.0.2 specifier: ^3.0.2
version: 3.0.2 version: 3.0.2
packages/mermaid-timeline: packages/mermaid-example-diagram-new:
dependencies:
d3:
specifier: ^7.0.0
version: 7.6.1
khroma:
specifier: ^2.0.0
version: 2.0.0
devDependencies: devDependencies:
concurrently: concurrently:
specifier: ^7.4.0 specifier: ^7.5.0
version: 7.5.0 version: 7.5.0
mermaid:
specifier: workspace:*
version: link:../mermaid
rimraf: rimraf:
specifier: ^3.0.2 specifier: ^3.0.2
version: 3.0.2 version: 3.0.2
tests/webpack: tests/webpack:
dependencies: dependencies:
'@mermaid-js/mermaid-mindmap': '@mermaid-js/mermaid-example-diagram':
specifier: workspace:* specifier: workspace:*
version: link:../../packages/mermaid-mindmap version: link:../../packages/mermaid-example-diagram-new
mermaid: mermaid:
specifier: workspace:* specifier: workspace:*
version: link:../../packages/mermaid version: link:../../packages/mermaid

2
tests/webpack/package.json
View File

@@ -18,6 +18,6 @@
}, },
"dependencies": { "dependencies": {
"mermaid": "workspace:*", "mermaid": "workspace:*",
"@mermaid-js/mermaid-mindmap": "workspace:*" "@mermaid-js/mermaid-example-diagram": "workspace:*"
} }
} }