mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
Mind map coming in from the cold. A lazy loaded diagram in the same way as timeline.
This commit is contained in:
Knut Sveidqvist
parent
38a84a7fe0
commit
74df4a7a68
@ -36,9 +36,9 @@ const packageOptions = {
|
||||
packageName: 'mermaid',
|
||||
file: 'mermaid.ts',
|
||||
},
|
||||
'mermaid-mindmap': {
|
||||
name: 'mermaid-mindmap',
|
||||
packageName: 'mermaid-mindmap',
|
||||
'mermaid-example-diagram': {
|
||||
name: 'mermaid-example-diagram',
|
||||
packageName: 'mermaid-example-diagram',
|
||||
file: 'detector.ts',
|
||||
},
|
||||
};
|
||||
@ -114,7 +114,7 @@ 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-example-diagram/src/**', 'packages/mermaid/src/**'],
|
||||
};
|
||||
}
|
||||
|
||||
@ -139,7 +139,7 @@ const main = async () => {
|
||||
if (watch) {
|
||||
build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
|
||||
if (!mermaidOnly) {
|
||||
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
|
||||
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
|
||||
}
|
||||
} else if (visualize) {
|
||||
await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
|
||||
|
||||
@ -22,7 +22,7 @@ async function createServer() {
|
||||
app.use(cors);
|
||||
app.use(express.static('./packages/mermaid/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(express.static('demos'));
|
||||
app.use(express.static('cypress/platform'));
|
||||
|
||||
@ -2,8 +2,8 @@ import { urlSnapshotTest } from '../../helpers/util';
|
||||
|
||||
describe('mermaid', () => {
|
||||
describe('registerDiagram', () => {
|
||||
it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
|
||||
const url = 'http://localhost:9000/external-diagrams-mindmap.html';
|
||||
it('should work on @mermaid-js/mermaid-example-diagram', () => {
|
||||
const url = 'http://localhost:9000/external-diagrams-example-diagram.html';
|
||||
urlSnapshotTest(url, {}, false, false);
|
||||
});
|
||||
});
|
||||
|
||||
@ -2,34 +2,8 @@
|
||||
<body>
|
||||
<h1>Should correctly load a third-party diagram using registerDiagram</h1>
|
||||
<pre id="diagram" class="mermaid">
|
||||
mindmap
|
||||
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))
|
||||
example-diagram
|
||||
</pre>
|
||||
<!-- <pre id="diagram" class="mermaid2">
|
||||
example-diagram
|
||||
</pre> -->
|
||||
|
||||
<!-- <div id="cy"></div> -->
|
||||
<!-- <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 type="module" src="./external-diagrams-mindmap.mjs" /> -->
|
||||
<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 mermaid from '../../packages/mermaid/src/mermaid';
|
||||
|
||||
await mermaid.registerExternalDiagrams([mindmap]);
|
||||
await mermaid.registerExternalDiagrams([exampleDiagram]);
|
||||
await mermaid.initialize({ logLevel: 0 });
|
||||
await mermaid.initThrowsErrorsAsync();
|
||||
if (window.Cypress) {
|
||||
@ -246,6 +246,10 @@ mindmap
|
||||
Pen and paper
|
||||
Mermaid
|
||||
</pre>
|
||||
<br />
|
||||
<pre id="diagram" class="mermaid">
|
||||
example-diagram
|
||||
</pre>
|
||||
|
||||
<!-- <div id="cy"></div> -->
|
||||
<!-- <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 type="module">
|
||||
import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||
// import example from '../../packages/mermaid-example-diagram/src/detector';
|
||||
// import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||
import example from '../../packages/mermaid-example-diagram/src/detector';
|
||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||
await mermaid.registerExternalDiagrams([mindmap]);
|
||||
await mermaid.registerExternalDiagrams([example]);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'dark',
|
||||
theme: 'forest',
|
||||
startOnLoad: true,
|
||||
logLevel: 0,
|
||||
flowchart: {
|
||||
|
||||
@ -1,81 +1,93 @@
|
||||
<html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
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"
|
||||
/>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Mindmap Mermaid Quick Test Page</title>
|
||||
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
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;
|
||||
div.mermaid {
|
||||
/* font-family: 'trebuchet ms', verdana, arial; */
|
||||
font-family: 'Courier New', Courier, monospace !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>Security check</div>
|
||||
<pre id="diagram" class="mermaid">
|
||||
graph TD
|
||||
A["test"] --"<p><style> * { display : none}</style>test</p>"--> B
|
||||
<h1>Mindmap diagram demo</h1>
|
||||
<pre class="mermaid">
|
||||
mindmap
|
||||
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>
|
||||
|
||||
<!-- <div id="cy"></div> -->
|
||||
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
|
||||
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
|
||||
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
|
||||
<!-- <script src="./mermaid.js"></script> -->
|
||||
<h2>Mindmap with root wrapping text and a shape</h2>
|
||||
<pre class="mermaid">
|
||||
mindmap
|
||||
root[A root with a long text that wraps to keep the node size in check]
|
||||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||
// import example from '../../packages/mermaid-example-diagram/src/detector';
|
||||
// import mermaid from './mermaid.esm.mjs';
|
||||
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) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'default',
|
||||
theme: 'base',
|
||||
startOnLoad: true,
|
||||
logLevel: 0,
|
||||
flowchart: {
|
||||
@ -94,10 +106,6 @@
|
||||
console.error('In parse error:');
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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) {
|
||||
return decodeURIComponent(escape(window.atob(str)));
|
||||
@ -44,7 +44,7 @@ const contentLoaded = async function () {
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
|
||||
await mermaid2.registerExternalDiagrams([mindmap]);
|
||||
await mermaid2.registerExternalDiagrams([externalExample]);
|
||||
mermaid2.initialize(graphObj.mermaid);
|
||||
await mermaid2.init();
|
||||
markRendered();
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
"build:vite": "ts-node-esm --transpileOnly .vite/build.ts",
|
||||
"build:mermaid": "pnpm build:vite --mermaid",
|
||||
"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": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"",
|
||||
"dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
### Do not refer this package. It is not ready.
|
||||
|
||||
### Refer mermaid-mindmap instead.
|
||||
@ -1,36 +1,25 @@
|
||||
{
|
||||
"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",
|
||||
"version": "9.3.0",
|
||||
"description": "Example of external diagram module for MermaidJS.",
|
||||
"module": "dist/mermaid-example-diagram.core.mjs",
|
||||
"types": "dist/detector.d.ts",
|
||||
"type": "module",
|
||||
"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": [
|
||||
"diagram",
|
||||
"markdown",
|
||||
"mindmap",
|
||||
"example",
|
||||
"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",
|
||||
"todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
|
||||
"todo-pre-commit": "lint-staged"
|
||||
"prepublishOnly": "pnpm -w run build"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -48,9 +37,19 @@
|
||||
"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": {
|
||||
"@types/cytoscape": "^3.19.9",
|
||||
"concurrently": "^7.5.0",
|
||||
"mermaid": "workspace:*",
|
||||
"rimraf": "^3.0.2"
|
||||
},
|
||||
"resolutions": {
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
// @ts-ignore: TODO Fix ts errors
|
||||
export const id = 'example-diagram';
|
||||
import type { ExternalDiagramDefinition } from 'mermaid';
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
const id = 'example-diagram';
|
||||
|
||||
export const detector = (txt: string) => {
|
||||
const detector = (txt: string) => {
|
||||
return txt.match(/^\s*example-diagram/) !== null;
|
||||
};
|
||||
|
||||
export const loadDiagram = async () => {
|
||||
const loader = async () => {
|
||||
const { diagram } = await import('./diagram-definition');
|
||||
return { id, diagram };
|
||||
};
|
||||
|
||||
const plugin: ExternalDiagramDefinition = {
|
||||
id,
|
||||
detector,
|
||||
loader,
|
||||
};
|
||||
|
||||
export default plugin;
|
||||
|
||||
@ -12,5 +12,3 @@ export const diagram = {
|
||||
styles,
|
||||
injectUtils,
|
||||
};
|
||||
|
||||
export { detector, id } from './detector';
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
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 () {
|
||||
let ex;
|
||||
beforeEach(function () {
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -19,13 +23,11 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
|
||||
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: any;
|
||||
/**
|
||||
* Placeholder for the real function that will be injected by mermaid.
|
||||
*/
|
||||
export let commonDb: () => object;
|
||||
// eslint-disable @typescript-eslint/no-explicit-any
|
||||
export let setupGraphViewbox: (
|
||||
graph: any,
|
||||
@ -34,25 +36,15 @@ export let setupGraphViewbox: (
|
||||
useMaxWidth: boolean
|
||||
) => 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 = (
|
||||
_log: Record<keyof typeof LEVELS, typeof console.log>,
|
||||
_setLogLevel: typeof setLogLevel,
|
||||
_getConfig: typeof getConfig,
|
||||
_sanitizeText: typeof sanitizeText,
|
||||
_setupGraphViewbox: typeof setupGraphViewbox,
|
||||
_setLogLevel: any,
|
||||
_getConfig: any,
|
||||
_sanitizeText: any,
|
||||
_setupGraphViewbox: any,
|
||||
_commonDb: any
|
||||
) => {
|
||||
_log.info('Mermaid utils injected into timeline-diagram');
|
||||
_log.info('Mermaid utils injected');
|
||||
log.trace = _log.trace;
|
||||
log.debug = _log.debug;
|
||||
log.info = _log.info;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"module": "esnext",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"outDir": "./dist"
|
||||
|
||||
@ -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"
|
||||
]
|
||||
}
|
||||
@ -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;
|
||||
};
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"module": "esnext",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"outDir": "./dist"
|
||||
},
|
||||
"include": ["./src/**/*.ts"],
|
||||
"typeRoots": ["./src/types"]
|
||||
}
|
||||
@ -53,6 +53,9 @@
|
||||
},
|
||||
"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",
|
||||
"dagre-d3-es": "7.0.8",
|
||||
"dompurify": "2.4.3",
|
||||
@ -66,6 +69,7 @@
|
||||
"uuid": "^9.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/cytoscape": "^3.19.9",
|
||||
"@types/d3": "^7.4.0",
|
||||
"@types/dompurify": "^2.4.0",
|
||||
"@types/jsdom": "^20.0.1",
|
||||
|
||||
@ -55,9 +55,10 @@ export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinitio
|
||||
|
||||
export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => {
|
||||
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' : ''}`);
|
||||
};
|
||||
|
||||
|
||||
@ -96,7 +96,10 @@ import errorStyles from '../diagrams/error/styles';
|
||||
import flowchartElk from '../diagrams/flowchart/elk/detector';
|
||||
import { registerLazyLoadedDiagrams } from './detectType';
|
||||
|
||||
// Lazy loaded diagrams
|
||||
import timelineDetector from '../diagrams/timeline/detector';
|
||||
import mindmapDetector from '../diagrams/mindmap/detector';
|
||||
|
||||
let hasLoadedDiagrams = false;
|
||||
export const addDiagrams = () => {
|
||||
if (hasLoadedDiagrams) {
|
||||
@ -105,7 +108,7 @@ export const addDiagrams = () => {
|
||||
// This is added here to avoid race-conditions.
|
||||
// We could optimize the loading logic somehow.
|
||||
hasLoadedDiagrams = true;
|
||||
registerLazyLoadedDiagrams(flowchartElk, timelineDetector);
|
||||
registerLazyLoadedDiagrams(flowchartElk, timelineDetector, mindmapDetector);
|
||||
|
||||
registerDiagram(
|
||||
'error',
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import type { ExternalDiagramDefinition } from 'mermaid';
|
||||
|
||||
import type { ExternalDiagramDefinition } from '../../diagram-api/types';
|
||||
const id = 'mindmap';
|
||||
|
||||
const detector = (txt: string) => {
|
||||
@ -3,12 +3,10 @@ import mindmapParser from './parser/mindmap';
|
||||
import * as mindmapDb from './mindmapDb';
|
||||
import mindmapRenderer from './mindmapRenderer';
|
||||
import mindmapStyles from './styles';
|
||||
import { injectUtils } from './mermaidUtils';
|
||||
|
||||
export const diagram = {
|
||||
db: mindmapDb,
|
||||
renderer: mindmapRenderer,
|
||||
parser: mindmapParser,
|
||||
styles: mindmapStyles,
|
||||
injectUtils,
|
||||
};
|
||||
@ -1,16 +1,16 @@
|
||||
import { parser as mindmap } from './parser/mindmap';
|
||||
import * as mindmapDB from './mindmapDb';
|
||||
import { injectUtils } from './mermaidUtils';
|
||||
// import { injectUtils } from './mermaidUtils';
|
||||
// Todo fix utils functions for tests
|
||||
import {
|
||||
log,
|
||||
// log,
|
||||
setLogLevel,
|
||||
getConfig,
|
||||
sanitizeText,
|
||||
setupGraphViewBox,
|
||||
} from '../../mermaid/src/diagram-api/diagramAPI';
|
||||
// getConfig,
|
||||
// sanitizeText,
|
||||
// setupGraphViewBox,
|
||||
} from '../../diagram-api/diagramAPI';
|
||||
|
||||
injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox);
|
||||
// injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox);
|
||||
|
||||
describe('when parsing a mindmap ', function () {
|
||||
beforeEach(function () {
|
||||
@ -1,5 +1,8 @@
|
||||
/** Created by knut on 15-01-14. */
|
||||
import { sanitizeText, getConfig, log } from './mermaidUtils';
|
||||
import { getConfig } from '../../config';
|
||||
import { sanitizeText as _sanitizeText } from '../../diagrams/common/common';
|
||||
import { log } from '../../logger';
|
||||
|
||||
export const sanitizeText = (text) => _sanitizeText(text, getConfig());
|
||||
|
||||
let nodes = [];
|
||||
let cnt = 0;
|
||||
@ -1,6 +1,8 @@
|
||||
/** Created by knut on 14-12-11. */
|
||||
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 cytoscape from 'cytoscape';
|
||||
import coseBilkent from 'cytoscape-cose-bilkent';
|
||||
@ -1,10 +1,10 @@
|
||||
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';
|
||||
|
||||
const init = (async () => {
|
||||
try {
|
||||
await mermaid.registerExternalDiagrams([mindmap, timeline]);
|
||||
await mermaid.registerExternalDiagrams([]);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
@ -32,9 +32,9 @@ export default defineConfig({
|
||||
alias: {
|
||||
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,
|
||||
'../../../mermaid-mindmap/dist/mermaid-mindmap.esm.min.mjs'
|
||||
'../../../mermaid-example-diagram/dist/mermaid-example-diagram.esm.min.mjs'
|
||||
), // Use this one to build
|
||||
// '@mermaid-js/mermaid-timeline': path.join(
|
||||
// __dirname,
|
||||
|
||||
41
pnpm-lock.yaml
generated
41
pnpm-lock.yaml
generated
@ -169,6 +169,15 @@ importers:
|
||||
'@braintree/sanitize-url':
|
||||
specifier: ^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:
|
||||
specifier: ^7.0.0
|
||||
version: 7.6.1
|
||||
@ -203,6 +212,9 @@ importers:
|
||||
specifier: ^9.0.0
|
||||
version: 9.0.0
|
||||
devDependencies:
|
||||
'@types/cytoscape':
|
||||
specifier: ^3.19.9
|
||||
version: 3.19.9
|
||||
'@types/d3':
|
||||
specifier: ^7.4.0
|
||||
version: 7.4.0
|
||||
@ -304,15 +316,6 @@ importers:
|
||||
version: 1.0.4-alpha.16_ifjhkyx3os4sbm7zdnvthc52am
|
||||
|
||||
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:
|
||||
'@braintree/sanitize-url':
|
||||
specifier: ^6.0.0
|
||||
@ -328,7 +331,7 @@ importers:
|
||||
version: 2.1.0_cytoscape@3.23.0
|
||||
d3:
|
||||
specifier: ^7.0.0
|
||||
version: 7.6.1
|
||||
version: 7.8.2
|
||||
khroma:
|
||||
specifier: ^2.0.0
|
||||
version: 2.0.0
|
||||
@ -349,27 +352,23 @@ importers:
|
||||
specifier: ^3.0.2
|
||||
version: 3.0.2
|
||||
|
||||
packages/mermaid-timeline:
|
||||
dependencies:
|
||||
d3:
|
||||
specifier: ^7.0.0
|
||||
version: 7.6.1
|
||||
khroma:
|
||||
specifier: ^2.0.0
|
||||
version: 2.0.0
|
||||
packages/mermaid-example-diagram-new:
|
||||
devDependencies:
|
||||
concurrently:
|
||||
specifier: ^7.4.0
|
||||
specifier: ^7.5.0
|
||||
version: 7.5.0
|
||||
mermaid:
|
||||
specifier: workspace:*
|
||||
version: link:../mermaid
|
||||
rimraf:
|
||||
specifier: ^3.0.2
|
||||
version: 3.0.2
|
||||
|
||||
tests/webpack:
|
||||
dependencies:
|
||||
'@mermaid-js/mermaid-mindmap':
|
||||
'@mermaid-js/mermaid-example-diagram':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/mermaid-mindmap
|
||||
version: link:../../packages/mermaid-example-diagram-new
|
||||
mermaid:
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/mermaid
|
||||
|
||||
@ -18,6 +18,6 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"mermaid": "workspace:*",
|
||||
"@mermaid-js/mermaid-mindmap": "workspace:*"
|
||||
"@mermaid-js/mermaid-example-diagram": "workspace:*"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user