mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-01 06:36:40 +02:00
chore: Cleanup
This commit is contained in:
@@ -22,22 +22,22 @@ const packageOptions = {
|
|||||||
'mermaid-mindmap': {
|
'mermaid-mindmap': {
|
||||||
name: 'mermaid-mindmap',
|
name: 'mermaid-mindmap',
|
||||||
packageName: 'mermaid-mindmap',
|
packageName: 'mermaid-mindmap',
|
||||||
file: 'add-diagram.ts',
|
file: 'diagram-definition.ts',
|
||||||
},
|
},
|
||||||
'mermaid-mindmap-detector': {
|
'mermaid-mindmap-detector': {
|
||||||
name: 'mermaid-mindmap-detector',
|
name: 'mermaid-mindmap-detector',
|
||||||
packageName: 'mermaid-mindmap',
|
packageName: 'mermaid-mindmap',
|
||||||
file: 'registry.ts',
|
file: 'detector.ts',
|
||||||
},
|
},
|
||||||
'mermaid-example-diagram': {
|
'mermaid-example-diagram': {
|
||||||
name: 'mermaid-example-diagram',
|
name: 'mermaid-example-diagram',
|
||||||
packageName: 'mermaid-example-diagram',
|
packageName: 'mermaid-example-diagram',
|
||||||
file: 'add-diagram.ts',
|
file: 'diagram-definition.ts',
|
||||||
},
|
},
|
||||||
'mermaid-example-diagram-detector': {
|
'mermaid-example-diagram-detector': {
|
||||||
name: 'mermaid-example-diagram-detector',
|
name: 'mermaid-example-diagram-detector',
|
||||||
packageName: 'mermaid-example-diagram',
|
packageName: 'mermaid-example-diagram',
|
||||||
file: 'registry.ts',
|
file: 'detector.ts',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@@ -385,7 +385,7 @@ flowchart TD
|
|||||||
htmlLabels: false,
|
htmlLabels: false,
|
||||||
fontFamily: 'courier',
|
fontFamily: 'courier',
|
||||||
},
|
},
|
||||||
extraDiagrams: ['./mermaid-mindmap-detector.js'],
|
lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
|
||||||
});
|
});
|
||||||
function callback() {
|
function callback() {
|
||||||
alert('It worked');
|
alert('It worked');
|
||||||
|
@@ -55,10 +55,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
example-diagram
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid">
|
||||||
mindmap
|
mindmap
|
||||||
root
|
root
|
||||||
@@ -85,6 +81,10 @@ mindmap
|
|||||||
::icon(mdi mdi-fire)
|
::icon(mdi mdi-fire)
|
||||||
gc7((grand<br/>grand<br/>child 8))
|
gc7((grand<br/>grand<br/>child 8))
|
||||||
</pre>
|
</pre>
|
||||||
|
<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> -->
|
||||||
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
|
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
|
||||||
@@ -100,8 +100,11 @@ mindmap
|
|||||||
logLevel: 0,
|
logLevel: 0,
|
||||||
// basePath: './packages/',
|
// basePath: './packages/',
|
||||||
// themeVariables: { darkMode: true },
|
// themeVariables: { darkMode: true },
|
||||||
extraDiagrams: ['./mermaid-mindmap-detector.esm.mjs'],
|
lazyLoadedDiagrams: [
|
||||||
// extraDiagrams: ['../../mermaid-mindmap/registry.ts'],
|
'./mermaid-mindmap-detector.esm.mjs',
|
||||||
|
'./mermaid-example-diagram-detector.esm.mjs',
|
||||||
|
],
|
||||||
|
// lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
|
||||||
});
|
});
|
||||||
function callback() {
|
function callback() {
|
||||||
alert('It worked');
|
alert('It worked');
|
||||||
|
@@ -36,7 +36,7 @@ const contentLoaded = function () {
|
|||||||
document.getElementsByTagName('body')[0].appendChild(div);
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
}
|
}
|
||||||
|
|
||||||
graphObj.mermaid.extraDiagrams = ['/mermaid-mindmap-detector.esm.mjs'];
|
graphObj.mermaid.lazyLoadedDiagrams = ['/mermaid-mindmap-detector.esm.mjs'];
|
||||||
|
|
||||||
mermaid2.initialize(graphObj.mermaid);
|
mermaid2.initialize(graphObj.mermaid);
|
||||||
mermaid2.init();
|
mermaid2.init();
|
||||||
|
@@ -1,3 +1,6 @@
|
|||||||
|
// @ts-ignore: TODO Fix ts errors
|
||||||
|
export const id = 'example-diagram';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Detector function that will be called by mermaid to determine if the diagram is this type of digram.
|
* Detector function that will be called by mermaid to determine if the diagram is this type of digram.
|
||||||
*
|
*
|
||||||
@@ -8,3 +11,8 @@
|
|||||||
export const detector = (txt: string) => {
|
export const detector = (txt: string) => {
|
||||||
return txt.match(/^\s*example-diagram/) !== null;
|
return txt.match(/^\s*example-diagram/) !== null;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const loadDiagram = async () => {
|
||||||
|
const { diagram } = await import('./diagram-definition');
|
||||||
|
return { id, diagram };
|
||||||
|
};
|
@@ -5,13 +5,10 @@ import renderer from './exampleDiagramRenderer';
|
|||||||
import styles from './styles';
|
import styles from './styles';
|
||||||
import { injectUtils } from './mermaidUtils';
|
import { injectUtils } from './mermaidUtils';
|
||||||
|
|
||||||
window.mermaid.connectDiagram(
|
export const diagram = {
|
||||||
'example-diagram',
|
db,
|
||||||
{
|
renderer,
|
||||||
db,
|
parser,
|
||||||
renderer,
|
styles,
|
||||||
parser,
|
injectUtils,
|
||||||
styles,
|
};
|
||||||
},
|
|
||||||
injectUtils
|
|
||||||
);
|
|
@@ -1,33 +0,0 @@
|
|||||||
// @ts-ignore: TODO Fix ts errors
|
|
||||||
import { detector } from './exampleDetector';
|
|
||||||
|
|
||||||
const scriptElement = document.currentScript as HTMLScriptElement;
|
|
||||||
const path = scriptElement.src;
|
|
||||||
const lastSlash = path.lastIndexOf('/');
|
|
||||||
const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
|
|
||||||
|
|
||||||
if (typeof document !== 'undefined') {
|
|
||||||
if (window.mermaid && typeof window.mermaid.detectors === 'object') {
|
|
||||||
window.mermaid.detectors.push({ id: 'example-diagram', detector });
|
|
||||||
} else {
|
|
||||||
window.mermaid = {};
|
|
||||||
window.mermaid.detectors = [{ id: 'example-diagram', detector }];
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Wait for document loaded before starting the execution.
|
|
||||||
*/
|
|
||||||
window.addEventListener(
|
|
||||||
'load',
|
|
||||||
() => {
|
|
||||||
if (window.mermaid && typeof window.mermaid.detectors === 'object') {
|
|
||||||
window.mermaid.detectors.push({
|
|
||||||
id: 'example-diagram',
|
|
||||||
detector,
|
|
||||||
path: baseFolder,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
@@ -5,6 +5,6 @@ export const detector = (txt: string) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const loadDiagram = async () => {
|
export const loadDiagram = async () => {
|
||||||
const { mindmap } = await import('./add-diagram');
|
const { diagram } = await import('./diagram-definition');
|
||||||
return { id, diagram: mindmap };
|
return { id, diagram };
|
||||||
};
|
};
|
@@ -5,7 +5,7 @@ import mindmapRenderer from './mindmapRenderer';
|
|||||||
import mindmapStyles from './styles';
|
import mindmapStyles from './styles';
|
||||||
import { injectUtils } from './mermaidUtils';
|
import { injectUtils } from './mermaidUtils';
|
||||||
|
|
||||||
export const mindmap = {
|
export const diagram = {
|
||||||
db: mindmapDb,
|
db: mindmapDb,
|
||||||
renderer: mindmapRenderer,
|
renderer: mindmapRenderer,
|
||||||
parser: mindmapParser,
|
parser: mindmapParser,
|
@@ -53,29 +53,3 @@ export const injectUtils = (
|
|||||||
sanitizeText = _sanitizeText;
|
sanitizeText = _sanitizeText;
|
||||||
setupGraphViewbox = _setupGraphViewbox;
|
setupGraphViewbox = _setupGraphViewbox;
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
|
||||||
const warning = (..._args: any[]) => {
|
|
||||||
console.error('Log function was called before initialization');
|
|
||||||
};
|
|
||||||
|
|
||||||
export let log = {
|
|
||||||
trace: warning,
|
|
||||||
debug: warning,
|
|
||||||
info: warning,
|
|
||||||
warn: warning,
|
|
||||||
error: warning,
|
|
||||||
fatal: warning,
|
|
||||||
};
|
|
||||||
export let setLogLevel;
|
|
||||||
export let getConfig;
|
|
||||||
export let sanitizeText;
|
|
||||||
export let setupGraphViewbox;
|
|
||||||
export const injectUtils = (_log, _setLogLevel, _getConfig, _sanitizeText, _setupGraphViewbox) => {
|
|
||||||
log = _log;
|
|
||||||
setLogLevel = _setLogLevel;
|
|
||||||
getConfig = _getConfig;
|
|
||||||
sanitizeText = _sanitizeText;
|
|
||||||
setupGraphViewbox = _setupGraphViewbox;
|
|
||||||
};
|
|
||||||
*/
|
|
||||||
|
@@ -3,7 +3,7 @@
|
|||||||
import DOMPurify from 'dompurify';
|
import DOMPurify from 'dompurify';
|
||||||
|
|
||||||
export interface MermaidConfig {
|
export interface MermaidConfig {
|
||||||
extraDiagrams?: any;
|
lazyLoadedDiagrams?: any;
|
||||||
theme?: string;
|
theme?: string;
|
||||||
themeVariables?: any;
|
themeVariables?: any;
|
||||||
themeCSS?: string;
|
themeCSS?: string;
|
||||||
|
@@ -115,7 +115,7 @@ const config: Partial<MermaidConfig> = {
|
|||||||
* Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
* Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||||
*/
|
*/
|
||||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
|
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
|
||||||
extraDiagrams: [],
|
lazyLoadedDiagrams: [],
|
||||||
/**
|
/**
|
||||||
* This option controls if the generated ids of nodes in the SVG are generated randomly or based
|
* This option controls if the generated ids of nodes in the SVG are generated randomly or based
|
||||||
* on a seed. If set to false, the IDs are generated based on the current date and thus are not
|
* on a seed. If set to false, the IDs are generated based on the current date and thus are not
|
||||||
|
@@ -55,11 +55,11 @@ const init = async function (
|
|||||||
try {
|
try {
|
||||||
log.info('Detectors in init', mermaid.detectors); // eslint-disable-line
|
log.info('Detectors in init', mermaid.detectors); // eslint-disable-line
|
||||||
const conf = mermaidAPI.getConfig();
|
const conf = mermaidAPI.getConfig();
|
||||||
if (typeof conf.extraDiagrams !== 'undefined' && conf.extraDiagrams.length > 0) {
|
if (typeof conf.lazyLoadedDiagrams !== 'undefined' && conf.lazyLoadedDiagrams.length > 0) {
|
||||||
// config.extraDiagrams.forEach(async (diagram: string) => {
|
for (let i = 0; i < conf.lazyLoadedDiagrams.length; i++) {
|
||||||
const { id, detector, loadDiagram } = await import(conf.extraDiagrams[0]);
|
const { id, detector, loadDiagram } = await import(conf.lazyLoadedDiagrams[i]);
|
||||||
addDetector(id, detector, loadDiagram);
|
addDetector(id, detector, loadDiagram);
|
||||||
// });
|
}
|
||||||
}
|
}
|
||||||
mermaid.detectors.forEach(({ id, detector, path }) => {
|
mermaid.detectors.forEach(({ id, detector, path }) => {
|
||||||
addDetector(id, detector, path);
|
addDetector(id, detector, path);
|
||||||
|
Reference in New Issue
Block a user