GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' into sidv/fixDetectDiagram

Browse Source 
* develop:
  chore: cleanup
  fix: dynamic import
  fix: Filename in viewer.js
  fix: pnpm not found
  fix: Import diagram
  Updated logic for diagram loading
  WIP
This commit is contained in:
Sidharth Vinod 2022-10-07 16:30:34 +08:00
commit cc55a82b64
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
20 changed files with 115 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/platform/knsv.html
View File

@ -368,7 +368,6 @@ flowchart TD
</pre>
<!-- <script src="./mermaid.js"></script> -->
<script src="./mermaid-mindmap-detector.js"></script>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
@ -386,6 +385,7 @@ flowchart TD
htmlLabels: false,
fontFamily: 'courier',
},
extraDiagrams: ['./mermaid-mindmap-detector.js'],
});
function callback() {
alert('It worked');

9
cypress/platform/knsv2.html
View File

@ -86,9 +86,10 @@ mindmap
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="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
@ -97,8 +98,10 @@ mindmap
theme: 'forest',
startOnLoad: true,
logLevel: 0,
basePath: './packages/',
// basePath: './packages/',
// themeVariables: { darkMode: true },
extraDiagrams: ['./mermaid-mindmap-detector.esm.mjs'],
// extraDiagrams: ['../../mermaid-mindmap/registry.ts'],
});
function callback() {
alert('It worked');

2
cypress/platform/viewer.js
View File

@ -36,6 +36,8 @@ const contentLoaded = function () {
document.getElementsByTagName('body')[0].appendChild(div);
}
graphObj.mermaid.extraDiagrams = ['/mermaid-mindmap-detector.esm.mjs'];
mermaid2.initialize(graphObj.mermaid);
mermaid2.init();
}

9
package.json
View File

@ -7,7 +7,7 @@
"module": "dist/mermaid.core.mjs",
"types": "dist/mermaid.d.ts",
"type": "module",
"packageManager": "pnpm@7.12.2",
"packageManager": "pnpm@7.13.2",
"exports": {
".": {
"require": "./dist/mermaid.min.js",
@ -72,8 +72,8 @@
},
"dependencies": {
"@braintree/sanitize-url": "^6.0.0",
"@types/uuid": "^8.3.4",
"@types/node": "^18.8.1",
"@types/uuid": "^8.3.4",
"d3": "^7.0.0",
"dagre": "^0.8.5",
"dagre-d3": "^0.6.4",
@ -108,8 +108,8 @@
"coveralls": "^3.1.1",
"cypress": "^10.0.0",
"cypress-image-snapshot": "^4.0.1",
"esbuild": "^0.15.10",
"documentation": "13.2.0",
"esbuild": "^0.15.10",
"eslint": "^8.24.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-cypress": "^2.12.1",
@ -129,6 +129,7 @@
"markdown-it": "^13.0.1",
"moment": "^2.23.0",
"path-browserify": "^1.0.1",
"pnpm": "^7.13.2",
"prettier": "^2.7.1",
"prettier-plugin-jsdoc": "^0.4.2",
"remark": "^14.0.2",
@ -137,10 +138,10 @@
"ts-node": "^10.9.1",
"typescript": "^4.8.4",
"unist-util-flatmap": "^1.0.0",
"vite": "^3.1.4",
"vitepress": "^1.0.0-alpha.19",
"vitepress-plugin-mermaid": "^2.0.8",
"vitepress-plugin-search": "^1.0.4-alpha.11",
"vite": "^3.1.4",
"vitest": "^0.23.4"
},
"resolutions": {

17
packages/mermaid-mindmap/src/add-diagram.ts
View File

@ -5,13 +5,10 @@ import mindmapRenderer from './mindmapRenderer';
import mindmapStyles from './styles';
import { injectUtils } from './mermaidUtils';
window.mermaid.connectDiagram(
'mindmap',
{
db: mindmapDb,
renderer: mindmapRenderer,
parser: mindmapParser,
styles: mindmapStyles,
},
injectUtils
);
export const mindmap = {
db: mindmapDb,
renderer: mindmapRenderer,
parser: mindmapParser,
styles: mindmapStyles,
injectUtils,
};

3
packages/mermaid-mindmap/src/mindmapDetector.ts
View File

@ -1,3 +0,0 @@
export const mindmapDetector = (txt: string) => {
return txt.match(/^\s*mindmap/) !== null;
};

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

@ -1,34 +1,10 @@
// @ts-ignore: TODO Fix ts errors
import { mindmapDetector } from './mindmapDetector';
export const id = 'mindmap';
const scriptElement = document.currentScript as HTMLScriptElement;
const path = scriptElement.src;
const lastSlash = path.lastIndexOf('/');
const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
export const detector = (txt: string) => {
return txt.match(/^\s*mindmap/) !== null;
};
if (typeof document !== 'undefined') {
if (window.mermaid && typeof window.mermaid.detectors === 'object') {
window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector });
} else {
window.mermaid = {};
window.mermaid.detectors = [{ id: 'mindmap', detector: mindmapDetector }];
}
/*!
* Wait for document loaded before starting the execution.
*/
window.addEventListener(
'load',
() => {
if (window.mermaid && typeof window.mermaid.detectors === 'object') {
window.mermaid.detectors.push({
id: 'mindmap',
detector: mindmapDetector,
path: baseFolder,
});
console.error(window.mermaid.detectors); // eslint-disable-line no-console
}
},
false
);
}
export const loadDiagram = async () => {
const { mindmap } = await import('./add-diagram');
return { id, diagram: mindmap };
};

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

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

23
packages/mermaid/src/Diagram.ts
View File

@ -1,7 +1,7 @@
import * as configApi from './config';
import { log } from './logger';
import { getDiagram, loadDiagram } from './diagram-api/diagramAPI';
import { detectType, getPathForDiagram } from './diagram-api/detectType';
import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
import { detectType, getDiagramLoader } from './diagram-api/detectType';
import { isDetailedError } from './utils';
export class Diagram {
type = 'graph';
@ -90,10 +90,25 @@ export const getDiagramFromText = async (txt: string, parseError?: Function) =>
// Trying to find the diagram
getDiagram(type);
} catch (error) {
const loader = getDiagramLoader(type);
if (!loader) {
throw new Error(`Diagram ${type} not found.`);
}
// Diagram not avaiable, loading it
const path = getPathForDiagram(type);
// const path = getPathForDiagram(type);
const { diagram } = await loader(); // eslint-disable-line @typescript-eslint/no-explicit-any
registerDiagram(
type,
{
db: diagram.db,
renderer: diagram.renderer,
parser: diagram.parser,
styles: diagram.styles,
},
diagram.injectUtils
);
// await loadDiagram('./packages/mermaid-mindmap/dist/mermaid-mindmap.js');
await loadDiagram(path + 'mermaid-' + type + '.js');
// await loadDiagram(path + 'mermaid-' + type + '.js');
// new diagram will try getDiagram again and if fails then it is a valid throw
}
// If either of the above worked, we have the diagram

1
packages/mermaid/src/config.type.ts
View File

@ -3,6 +3,7 @@
import DOMPurify from 'dompurify';
export interface MermaidConfig {
extraDiagrams?: any;
theme?: string;
themeVariables?: any;
themeCSS?: string;

2
packages/mermaid/src/defaultConfig.ts
View File

@ -115,7 +115,7 @@ const config: Partial<MermaidConfig> = {
* Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
*/
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
extraDiagrams: [],
/**
* 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

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

@ -1,8 +1,8 @@
import { MermaidConfig } from '../config.type';
export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
export type DetectorRecord = { detector: DiagramDetector; path: string };
export type DiagramLoader = (() => Promise<unknown>) | null;
export type DetectorRecord = { detector: DiagramDetector; loader: DiagramLoader };
const directive =
/[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
const anyComment = /\s*%%.*\n/gm;
@ -34,9 +34,9 @@ const detectors: Record<string, DetectorRecord> = {};
*/
export const detectType = function (text: string, config?: MermaidConfig): string {
text = text.replace(directive, '').replace(anyComment, '\n');
for (const [key, detectorRecord] of Object.entries(detectors)) {
if (detectorRecord.detector(text, config)) {
for (const [key, { detector }] of Object.entries(detectors)) {
const diagram = detector(text, config);
if (diagram) {
return key;
}
}
@ -44,13 +44,12 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
throw new Error(`No diagram type detected for text: ${text}`);
};
export const addDetector = (key: string, detector: DiagramDetector, path: string) => {
detectors[key] = { detector, path };
export const addDetector = (
key: string,
detector: DiagramDetector,
loader: DiagramLoader | null
) => {
detectors[key] = { detector, loader };
};
export const getPathForDiagram = (id: string) => {
const detectorRecord = detectors[id];
if (detectorRecord) {
return detectorRecord.path;
}
};
export const getDiagramLoader = (key: string) => detectors[key].loader;

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

@ -112,7 +112,7 @@ const registerDiagramAndDetector = (
detector: DiagramDetector
) => {
registerDiagram(id, diagram);
registerDetector(id, detector, '');
registerDetector(id, detector);
};
export const addDiagrams = () => {

18
packages/mermaid/src/diagram-api/diagramAPI.spec.ts
View File

@ -21,17 +21,13 @@ describe('DiagramAPI', () => {
const detector: DiagramDetector = (str: string) => {
return str.match('loki') !== null;
};
registerDetector('loki', detector, '');
registerDiagram(
'loki',
{
db: {},
parser: {},
renderer: {},
styles: {},
},
(text: string) => text.includes('loki')
);
registerDetector('loki', detector);
registerDiagram('loki', {
db: {},
parser: {},
renderer: {},
styles: {},
});
expect(getDiagram('loki')).not.toBeNull();
expect(detectType('loki diagram')).toBe('loki');
});

17
packages/mermaid/src/diagram-api/diagramAPI.ts
View File

@ -18,12 +18,21 @@ export const getConfig = _getConfig;
export const sanitizeText = (text: string) => _sanitizeText(text, getConfig());
export const setupGraphViewbox = _setupGraphViewbox;
export interface InjectUtils {
_log: any;
_setLogLevel: any;
_getConfig: any;
_sanitizeText: any;
_setupGraphViewbox: any;
}
export interface DiagramDefinition {
db: any;
renderer: any;
parser: any;
styles: any;
init?: (config: MermaidConfig) => void;
injectUtils?: (utils: InjectUtils) => void;
}
const diagrams: Record<string, DiagramDefinition> = {};
@ -32,8 +41,8 @@ export interface Detectors {
[key: string]: DiagramDetector;
}
export const registerDetector = (id: string, detector: DiagramDetector, path: string) => {
addDetector(id, detector, path);
export const registerDetector = (id: string, detector: DiagramDetector) => {
addDetector(id, detector, null);
};
export const registerDiagram = (
@ -52,7 +61,9 @@ export const registerDiagram = (
}
diagrams[id] = diagram;
addStylesForDiagram(id, diagram.styles);
connectCallbacks[id] = callback;
if (typeof callback !== 'undefined') {
callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
}
};
export const getDiagram = (name: string): DiagramDefinition => {

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

@ -54,10 +54,17 @@ const init = async function (
) {
try {
log.info('Detectors in init', mermaid.detectors); // eslint-disable-line
const conf = mermaidAPI.getConfig();
if (typeof conf.extraDiagrams !== 'undefined' && conf.extraDiagrams.length > 0) {
// config.extraDiagrams.forEach(async (diagram: string) => {
const { id, detector, loadDiagram } = await import(conf.extraDiagrams[0]);
addDetector(id, detector, loadDiagram);
// });
}
mermaid.detectors.forEach(({ id, detector, path }) => {
addDetector(id, detector, path);
});
initThrowsErrors(config, nodes, callback);
await initThrowsErrors(config, nodes, callback);
} catch (e) {
log.warn('Syntax Error rendering');
if (isDetailedError(e)) {
@ -164,8 +171,8 @@ const initThrowsErrors = async function (
}
};
const initialize = function (config: MermaidConfig) {
mermaidAPI.initialize(config);
const initialize = async function (config: MermaidConfig) {
await mermaidAPI.initialize(config);
};
/**

4
packages/mermaid/src/mermaidAPI.ts
View File

@ -18,6 +18,7 @@ import { compile, serialize, stringify } from 'stylis';
import pkg from '../package.json';
import * as configApi from './config';
import { addDiagrams } from './diagram-api/diagram-orchestration';
import { addDetector } from './diagram-api/detectType';
import classDb from './diagrams/class/classDb';
import flowDb from './diagrams/flowchart/flowDb';
import flowRenderer from './diagrams/flowchart/flowRenderer';
@ -461,7 +462,7 @@ const handleDirective = function (p: any, directive: any, type: string): void {
};
/** @param {MermaidConfig} options */
function initialize(options: MermaidConfig) {
async function initialize(options: MermaidConfig) {
// Handle legacy location of font-family configuration
if (options?.fontFamily) {
if (!options.themeVariables?.fontFamily) {
@ -485,6 +486,7 @@ function initialize(options: MermaidConfig) {
typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();
setLogLevel(config.logLevel);
if (!hasLoadedDiagrams) {
addDiagrams();
hasLoadedDiagrams = true;

8
pnpm-lock.yaml generated
View File

@ -60,6 +60,7 @@ importers:
moment-mini: ^2.24.0
non-layered-tidy-tree-layout: ^2.0.2
path-browserify: ^1.0.1
pnpm: ^7.13.2
prettier: ^2.7.1
prettier-plugin-jsdoc: ^0.4.2
remark: ^14.0.2
@ -134,6 +135,7 @@ importers:
markdown-it: 13.0.1
moment: 2.29.4
path-browserify: 1.0.1
pnpm: 7.13.2
prettier: 2.7.1
prettier-plugin-jsdoc: 0.4.2_prettier@2.7.1
remark: 14.0.2
@ -10729,6 +10731,12 @@ packages:
engines: {node: '>=12.13.0'}
dev: true
/pnpm/7.13.2:
resolution: {integrity: sha512-lOQRBcCWycLK1PB9KptqTd6iyiH7m4GRuS4G2j4b74yDx/XvRXtP/weYz8e0/ia7HX1pMF1vJCF48ssklq0TJQ==}
engines: {node: '>=14.6'}
hasBin: true
dev: true
/posix-character-classes/0.1.1:
resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
engines: {node: '>=0.10.0'}

2
tsconfig.json
View File

@ -27,7 +27,7 @@
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
/* Modules */
"module": "ES6" /* Specify what module code is generated. */,
"module": "es2022" /* Specify what module code is generated. */,
// "rootDir": "./packages" /* Specify the root folder within your source files. */,
"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
// "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,

8
vite.config.ts
View File

@ -15,4 +15,12 @@ export default defineConfig({
reporter: ['text', 'json', 'html', 'lcov'],
},
},
build: {
/** If you set esmExternals to true, this plugins assumes that
all external dependencies are ES modules */
commonjsOptions: {
esmExternals: true,
},
},
});