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

Adding example diagram as a template for a new diagram

Browse Source
This commit is contained in:
Knut Sveidqvist 2022-09-28 17:49:47 +02:00
parent bed9b1bb99
commit f46f8752ca
15 changed files with 374 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.vite/build.ts
View File

@ -29,6 +29,16 @@ const packageOptions = {
packageName: 'mermaid-mindmap', packageName: 'mermaid-mindmap',
file: 'registry.ts', file: 'registry.ts',
}, },
'mermaid-example-diagram': {
name: 'mermaid-example-diagram',
packageName: 'mermaid-example-diagram',
file: 'add-diagram.ts',
},
'mermaid-example-diagram-detector': {
name: 'mermaid-example-diagram-detector',
packageName: 'mermaid-example-diagram',
file: 'registry.ts',
},
}; };
interface BuildOptions { interface BuildOptions {
@ -97,7 +107,11 @@ 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-mindmap/src/**',
'packages/mermaid/src/**',
'packages/mermaid-example-diagram/src/**',
],
}; };
} }
@ -122,6 +136,7 @@ const main = async () => {
if (watch) { if (watch) {
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid' })); build(getBuildConfig({ minify: false, watch, entryName: 'mermaid' }));
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
} else { } else {
void main(); void main();
} }

8
cypress/platform/knsv2.html
View File

@ -45,12 +45,11 @@
</head> </head>
<body> <body>
<div>Security check</div> <div>Security check</div>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid">
flowchart LR info
A -> B
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
mindmap mindmap
root root
ch1 ch1
@ -58,6 +57,7 @@
</pre </pre
> >
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
<script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
<script src="./packages/mermaid/dist/mermaid.js"></script> <script src="./packages/mermaid/dist/mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {

70
packages/mermaid-example-diagram/package.json Normal file
View File

@ -0,0 +1,70 @@
{
"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",
"type": "module",
"exports": {
".": {
"require": "./dist/mermaid-example-diagram.min.js",
"import": "./dist/mermaid-example-diagram.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": {},
"devDependencies": {
"concurrently": "^7.4.0",
"rimraf": "^3.0.2"
},
"resolutions": {
"d3": "^7.0.0"
},
"files": [
"dist"
],
"sideEffects": [
"**/*.css",
"**/*.scss"
]
}

17
packages/mermaid-example-diagram/src/add-diagram.ts Normal file
View File

@ -0,0 +1,17 @@
// @ts-ignore: TODO Fix ts errors
import parser from './parser/exampleDiagram';
import * as db from './exampleDiagramDb';
import renderer from './exampleDiagramRenderer';
import styles from './styles';
import { injectUtils } from './mermaidUtils';
window.mermaid.connectDiagram(
'example-diagram',
{
db,
renderer,
parser,
styles,
},
injectUtils
);

3
packages/mermaid-example-diagram/src/exampleDetector.ts Normal file
View File

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

16
packages/mermaid-example-diagram/src/exampleDiagram.spec.js Normal file
View File

@ -0,0 +1,16 @@
import { parser } from './parser/info';
import infoDb from './infoDb';
describe('when parsing an info graph it', function () {
let ex;
beforeEach(function () {
ex = parser;
ex.yy = infoDb;
});
it('should handle an info definition', function () {
let str = `info
showInfo`;
ex.parse(str);
});
});

33
packages/mermaid-example-diagram/src/exampleDiagramDb.js Normal file
View File

@ -0,0 +1,33 @@
/** Created by knut on 15-01-14. */
import { log } from './mermaidUtils';
var message = '';
var info = false;
export const setMessage = (txt) => {
log.debug('Setting message to: ' + txt);
message = txt;
};
export const getMessage = () => {
return message;
};
export const setInfo = (inf) => {
info = inf;
};
export const getInfo = () => {
return info;
};
export default {
setMessage,
getMessage,
setInfo,
getInfo,
clear: () => {
message = '';
info = false;
},
};

55
packages/mermaid-example-diagram/src/exampleDiagramRenderer.js Normal file
View File

@ -0,0 +1,55 @@
/** Created by knut on 14-12-11. */
import { select } from 'd3';
import { log, getConfig } from './mermaidUtils';
/**
* Draws a an info picture in the tag with id: id based on the graph definition in text.
*
* @param {any} text
* @param {any} id
* @param {any} version
* @param diagObj
*/
export const draw = (text, id, version, diagObj) => {
try {
log.debug('Rendering info diagram\n' + text);
const securityLevel = getConfig().securityLevel;
// Handle root and Document for when rendering in sanbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
// Parse the graph definition
// parser.parse(text);
// log.debug('Parsed info diagram');
// Fetch the default direction, use TD if none was found
const svg = root.select('#' + id);
const g = svg.append('g');
g.append('text') // text label for the x axis
.attr('x', 100)
.attr('y', 40)
.attr('class', 'version')
.attr('font-size', '32px')
.style('text-anchor', 'middle')
.text('v ' + version);
svg.attr('height', 100);
svg.attr('width', 400);
// svg.attr('viewBox', '0 0 300 150');
} catch (e) {
log.error('Error while rendering info diagram');
log.error(e.message);
}
};
export default {
draw,
};

63
packages/mermaid-example-diagram/src/mermaidUtils.ts Normal file
View File

@ -0,0 +1,63 @@
const warning = () => null;
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;
/**
* Placeholder for the real function that will be injected by mermaid.
*/
// eslint-disable @typescript-eslint/no-explicit-any
export let setupGraphViewbox: (
graph: any,
svgElem: any,
padding: any,
useMaxWidth: boolean
) => void;
/**
* Function called by mermaid that injects utility functions that help the diagram to be a good citizen.
* @param _log
* @param _setLogLevel
* @param _getConfig
* @param _sanitizeText
* @param _setupGraphViewbox
*/
export const injectUtils = (
_log: Record<keyof typeof LEVELS, typeof console.log>,
_setLogLevel: any,
_getConfig: any,
_sanitizeText: any,
_setupGraphViewbox: any
) => {
_log.debug('Mermaid utils injected into example-diagram');
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;
};

43
packages/mermaid-example-diagram/src/parser/exampleDiagram.jison Normal file
View File

@ -0,0 +1,43 @@
%lex
%options case-insensitive
%{
// Pre-lexer code can go here
%}
%%
"info" return 'info' ;
[\s\n\r]+ return 'NL' ;
[\s]+ return 'space';
"showInfo" return 'showInfo';
<<EOF>> return 'EOF' ;
. return 'TXT' ;
/lex
%start start
%% /* language grammar */
start
// %{ : info document 'EOF' { return yy; } }
: info document 'EOF' { return yy; }
;
document
: /* empty */
| document line
;
line
: statement { }
| 'NL'
;
statement
: showInfo { yy.setInfo(true); }
;
%%

33
packages/mermaid-example-diagram/src/registry.ts Normal file
View File

@ -0,0 +1,33 @@
// @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
);
}

3
packages/mermaid-example-diagram/src/styles.js Normal file
View File

@ -0,0 +1,3 @@
const getStyles = () => ``;
export default getStyles;

7
packages/mermaid-example-diagram/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
}
}

9
packages/mermaid-example-diagram/tsconfig.json Normal file
View File

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

13
pnpm-lock.yaml generated
View File

@ -259,24 +259,15 @@ importers:
unist-util-flatmap: 1.0.0 unist-util-flatmap: 1.0.0
vitest: 0.23.4_y2hohvmcqnhseytaw4yjcnsnkm vitest: 0.23.4_y2hohvmcqnhseytaw4yjcnsnkm
packages/mermaid-mindmap: packages/mermaid-example-diagram:
specifiers: specifiers:
'@braintree/sanitize-url': ^6.0.0
concurrently: ^7.4.0 concurrently: ^7.4.0
d3: ^7.0.0
mermaid: workspace:*
non-layered-tidy-tree-layout: ^2.0.2
rimraf: ^3.0.2 rimraf: ^3.0.2
dependencies:
'@braintree/sanitize-url': 6.0.0
d3: 7.6.1
mermaid: link:../mermaid
non-layered-tidy-tree-layout: 2.0.2
devDependencies: devDependencies:
concurrently: 7.4.0 concurrently: 7.4.0
rimraf: 3.0.2 rimraf: 3.0.2
packages/rm-mermaid-mindmap-detector: packages/mermaid-mindmap:
specifiers: specifiers:
'@braintree/sanitize-url': ^6.0.0 '@braintree/sanitize-url': ^6.0.0
concurrently: ^7.4.0 concurrently: ^7.4.0