marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-07 16:19:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into develop

Browse Source
This commit is contained in:
Emerson Bottero
2022-09-28 22:47:48 -03:00
committed by GitHub
parent d858cd677e 80c68d847c
commit 6191bb5f1b
56 changed files with 4907 additions and 1540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
.esbuild/esbuild.cjs
View File

@@ -1,20 +0,0 @@
const { esmBuild, esmCoreBuild, iifeBuild } = require('./util.cjs');
const { build } = require('esbuild');
const handler = (e) => {
console.error(e);
process.exit(1);
};
const watch = process.argv.includes('--watch');
// mermaid.js
build(iifeBuild({ minify: false, watch })).catch(handler);
// mermaid.esm.mjs
build(esmBuild({ minify: false, watch })).catch(handler);
// mermaid.min.js
build(iifeBuild()).catch(handler);
// mermaid.esm.min.mjs
build(esmBuild()).catch(handler);
// mermaid.core.mjs (node_modules unbundled)
build(esmCoreBuild()).catch(handler);

79
.esbuild/serve.cjs
View File

@@ -1,79 +0,0 @@
const esbuild = require('esbuild');
const http = require('http');
const { iifeBuild, esmBuild } = require('./util.cjs');
const express = require('express');
// Start 2 esbuild servers. One for IIFE and one for ESM
// Serve 2 static directories: demo & cypress/platform
// Have 3 entry points:
// mermaid: './src/mermaid',
// e2e: './cypress/platform/viewer.js',
// 'bundle-test': './cypress/platform/bundle-test.js',
const getEntryPointsAndExtensions = (format) => {
return {
entryPoints: {
mermaid: './src/mermaid',
e2e: 'cypress/platform/viewer.js',
'bundle-test': 'cypress/platform/bundle-test.js',
},
outExtension: { '.js': format === 'iife' ? '.js' : '.esm.mjs' },
};
};
const generateHandler = (server) => {
return (req, res) => {
const options = {
hostname: server.host,
port: server.port,
path: req.url,
method: req.method,
headers: req.headers,
};
// Forward each incoming request to esbuild
const proxyReq = http.request(options, (proxyRes) => {
// If esbuild returns "not found", send a custom 404 page
if (proxyRes.statusCode === 404) {
if (!req.url.endsWith('.html')) {
res.writeHead(404, { 'Content-Type': 'text/html' });
res.end('<h1>A custom 404 page</h1>');
return;
}
}
// Otherwise, forward the response from esbuild to the client
res.writeHead(proxyRes.statusCode, proxyRes.headers);
proxyRes.pipe(res, { end: true });
});
// Forward the body of the request to esbuild
req.pipe(proxyReq, { end: true });
};
};
(async () => {
const iifeServer = await esbuild.serve(
{},
{
...iifeBuild({ minify: false, outfile: undefined, outdir: 'dist' }),
...getEntryPointsAndExtensions('iife'),
}
);
const esmServer = await esbuild.serve(
{},
{
...esmBuild({ minify: false, outfile: undefined, outdir: 'dist' }),
...getEntryPointsAndExtensions('esm'),
}
);
const app = express();
app.use(express.static('demos'));
app.use(express.static('cypress/platform'));
app.all('/mermaid.js', generateHandler(iifeServer));
app.all('/mermaid.esm.mjs', generateHandler(esmServer));
app.all('/e2e.esm.mjs', generateHandler(esmServer));
app.all('/bundle-test.esm.mjs', generateHandler(esmServer));
app.listen(9000, () => {
console.log(`Listening on http://localhost:9000`);
});
})();

94
.esbuild/util.cjs
View File

@@ -1,94 +0,0 @@
const { transformJison } = require('./jisonTransformer.cjs');
const fs = require('fs');
const { dependencies } = require('../package.json');
/** @typedef {import('esbuild').BuildOptions} Options */
/**
* @param {Options} override
* @returns {Options}
*/
const buildOptions = (override = {}) => {
return {
bundle: true,
minify: true,
keepNames: true,
banner: { js: '"use strict";' },
globalName: 'mermaid',
platform: 'browser',
tsconfig: 'tsconfig.json',
resolveExtensions: ['.ts', '.js', '.mjs', '.json', '.jison'],
external: ['require', 'fs', 'path'],
entryPoints: ['src/mermaid.ts'],
outfile: 'dist/mermaid.min.js',
plugins: [jisonPlugin],
sourcemap: 'external',
...override,
};
};
/**
* Build options for mermaid.esm.* build.
*
* For ESM browser use.
*
* @param {Options} override - Override options.
* @returns {Options} ESBuild build options.
*/
exports.esmBuild = (override = { minify: true }) => {
return buildOptions({
format: 'esm',
outfile: `dist/mermaid.esm${override.minify ? '.min' : ''}.mjs`,
...override,
});
};
/**
* Build options for mermaid.core.* build.
*
* This build does not bundle `./node_modules/`, as it is designed to be used with
* Webpack/ESBuild/Vite to use mermaid inside an app/website.
*
* @param {Options} override - Override options.
* @returns {Options} ESBuild build options.
*/
exports.esmCoreBuild = (override) => {
return buildOptions({
format: 'esm',
outfile: `dist/mermaid.core.mjs`,
external: ['require', 'fs', 'path', ...Object.keys(dependencies)],
platform: 'neutral',
...override,
});
};
/**
* Build options for mermaid.js build.
*
* For IIFE browser use (where ESM is not yet supported).
*
* @param {Options} override - Override options.
* @returns {Options} ESBuild build options.
*/
exports.iifeBuild = (override = { minify: true }) => {
return buildOptions({
outfile: `dist/mermaid${override.minify ? '.min' : ''}.js`,
format: 'iife',
footer: {
js: 'mermaid = mermaid.default;',
},
...override,
});
};
const jisonPlugin = {
name: 'jison',
setup(build) {
build.onLoad({ filter: /\.jison$/ }, async (args) => {
// Load the file from the file system
const source = await fs.promises.readFile(args.path, 'utf8');
const contents = transformJison(source);
return { contents, warnings: [] };
});
},
};

9
.github/workflows/e2e.yml vendored
View File

@@ -37,11 +37,16 @@ jobs:
# and run all Cypress tests
- name: Cypress run
uses: cypress-io/github-action@v3
# If CYPRESS_RECORD_KEY is set, run in parallel on all containers
# Otherwise (e.g. if running from fork), we run on a single container only
if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
with:
start: yarn dev
wait-on: 'http://localhost:9000'
record: true
# Disable recording if we don't have an API key
# e.g. if this action was run from a fork
record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
headless: true
parallel: true
env:
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

6
.gitignore vendored
View File

@@ -12,7 +12,11 @@ token
package-lock.json
.vscode/
# ignore files in /.vscode/ except for launch.json and extensions.json
/.vscode/**
!/.vscode/launch.json
!/.vscode/extensions.json
cypress/platform/current.html
cypress/platform/experimental.html
local/

89
.vite/build.ts Normal file
View File

@@ -0,0 +1,89 @@
import { build, InlineConfig } from 'vite';
import { resolve } from 'path';
import { fileURLToPath } from 'url';
import jisonPlugin from './jisonPlugin.js';
import pkg from '../package.json' assert { type: 'json' };
type OutputOptions = Exclude<
Exclude<InlineConfig['build'], undefined>['rollupOptions'],
undefined
>['output'];
const { dependencies } = pkg;
const watch = process.argv.includes('--watch');
const __dirname = fileURLToPath(new URL('.', import.meta.url));
interface BuildOptions {
minify: boolean | 'esbuild';
core?: boolean;
watch?: boolean;
}
export const getBuildConfig = ({ minify, core, watch }: BuildOptions): InlineConfig => {
const external = ['require', 'fs', 'path'];
let output: OutputOptions = [
{
name: 'mermaid',
format: 'esm',
sourcemap: true,
entryFileNames: `[name].esm${minify ? '.min' : ''}.mjs`,
},
{
name: 'mermaid',
format: 'umd',
sourcemap: true,
entryFileNames: `[name]${minify ? '.min' : ''}.js`,
},
];
if (core) {
// Core build is used to generate file without bundled dependencies.
// This is used by downstream projects to bundle dependencies themselves.
external.push(...Object.keys(dependencies));
// This needs to be an array. Otherwise vite will build esm & umd with same name and overwrite esm with umd.
output = [
{
format: 'esm',
sourcemap: true,
entryFileNames: `[name].core.mjs`,
},
];
}
const config: InlineConfig = {
configFile: false,
build: {
emptyOutDir: false,
lib: {
entry: resolve(__dirname, '../src/mermaid.ts'),
name: 'mermaid',
// the proper extensions will be added
fileName: 'mermaid',
},
minify,
rollupOptions: {
external,
output,
},
},
resolve: {
extensions: ['.jison', '.js', '.ts', '.json'],
},
plugins: [jisonPlugin()],
};
if (watch && config.build) {
config.build.watch = {
include: 'src/**',
};
}
return config;
};
if (watch) {
build(getBuildConfig({ minify: false, watch }));
} else {
build(getBuildConfig({ minify: false }));
build(getBuildConfig({ minify: 'esbuild' }));
build(getBuildConfig({ minify: false, core: true }));
}

17
.vite/jisonPlugin.ts Normal file
View File

@@ -0,0 +1,17 @@
import { transformJison } from './jisonTransformer.js';
const fileRegex = /\.(jison)$/;
export default function jison() {
return {
name: 'jison',
transform(src: string, id: string) {
if (fileRegex.test(id)) {
return {
code: transformJison(src),
map: null, // provide source map if available
};
}
},
};
}

9
.esbuild/jisonTransformer.cjs → .vite/jisonTransformer.ts
View File

@@ -1,6 +1,9 @@
const { Generator } = require('jison');
exports.transformJison = (src) => {
const parser = new Generator(src, {
// @ts-ignore No typings for jison
import jison from 'jison';
export const transformJison = (src: string): string => {
// @ts-ignore No typings for jison
const parser = new jison.Generator(src, {
moduleType: 'js',
'token-stack': true,
});

26
.vite/server.ts Normal file
View File

@@ -0,0 +1,26 @@
import express from 'express';
import { createServer as createViteServer } from 'vite';
// import { getBuildConfig } from './build';
async function createServer() {
const app = express();
// Create Vite server in middleware mode
const vite = await createViteServer({
configFile: './vite.config.ts',
server: { middlewareMode: true },
appType: 'custom', // don't include Vite's default HTML handling middlewares
});
app.use(vite.middlewares);
app.use(express.static('dist'));
app.use(express.static('demos'));
app.use(express.static('cypress/platform'));
app.listen(9000, () => {
console.log(`Listening on http://localhost:9000`);
});
}
// build(getBuildConfig({ minify: false, watch: true }));
createServer();

6
.vite/tsconfig.json Normal file
View File

@@ -0,0 +1,6 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"module": "ES2022"
}
}

8
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,8 @@
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"zixuanchen.vitest-explorer",
"luniclynx.bison"
]
}

17
.vscode/launch.json vendored Normal file
View File

@@ -0,0 +1,17 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Current Test File",
"autoAttachChildProcesses": true,
"skipFiles": ["<node_internals>/**", "**/node_modules/**"],
"program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
"args": ["run", "${relativeFile}"],
"smartStep": true,
"console": "integratedTerminal"
}
]
}

6
cypress/helpers/util.js
View File

@@ -1,4 +1,6 @@
import { Base64 } from 'js-base64';
const utf8ToB64 = (str) => {
return window.btoa(unescape(encodeURIComponent(str)));
};
export const mermaidUrl = (graphStr, options, api) => {
const obj = {
@@ -6,7 +8,7 @@ export const mermaidUrl = (graphStr, options, api) => {
mermaid: options,
};
const objStr = JSON.stringify(obj);
let url = 'http://localhost:9000/e2e.html?graph=' + Base64.encodeURI(objStr);
let url = 'http://localhost:9000/e2e.html?graph=' + utf8ToB64(objStr);
if (api) {
url = 'http://localhost:9000/xss.html?graph=' + graphStr;
}

2
cypress/integration/other/xss.spec.js
View File

@@ -15,7 +15,7 @@ describe('XSS', () => {
it('should not allow tags in the css', () => {
const str =
'eyJjb2RlIjoiJSV7aW5pdDogeyAnZm9udEZhbWlseSc6ICdcXFwiPjwvc3R5bGU-PGltZyBzcmM9eCBvbmVycm9yPXhzc0F0dGFjaygpPid9IH0lJVxuZ3JhcGggTFJcbiAgICAgQSAtLT4gQiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9';
'eyJjb2RlIjoiJSV7aW5pdDogeyAnZm9udEZhbWlseSc6ICdcXFwiPjwvc3R5bGU+PGltZyBzcmM9eCBvbmVycm9yPXhzc0F0dGFjaygpPid9IH0lJVxuZ3JhcGggTFJcbiAgICAgQSAtLT4gQiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9';
const url = mermaidUrl(
str,

2
cypress/platform/bundle-test.js
View File

@@ -1,4 +1,4 @@
import mermaid from '../../dist/mermaid.core';
import mermaid from '../../src/mermaid';
let code = `flowchart LR
Power_Supply --> Transmitter_A

2
cypress/platform/e2e.html
View File

@@ -2,7 +2,7 @@
<head>
<meta charset="utf-8" />
<!-- <meta charset="iso-8859-15"/> -->
<script src="/e2e.esm.mjs" type="module"></script>
<script src="./viewer.js" type="module" />
<!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

38
cypress/platform/knsv.html
View File

@@ -38,13 +38,17 @@
</style>
</head>
<body>
<pre class="mermaid2" style="width: 50%">
flowchart LR
a ---
</pre>
<pre class="mermaid" style="width: 50%">
flowchart LR
a2 ---
subgraph one
direction LR
A[myClass1] --> B[default]
subgraph two
direction BT
C[myClass2] --> D[default]
end
end
</pre>
<pre class="mermaid2" style="width: 50%">
flowchart LR
@@ -79,7 +83,7 @@ flowchart TD
end
end
</pre>
<pre class="mermaid" style="width: 50%">
<pre class="mermaid2" style="width: 50%">
flowchart TD
release-branch[Create Release Branch]:::relClass
@@ -131,7 +135,7 @@ flowchart TD
class A someclass;
class C someclass;
</pre>
<pre class="mermaid" style="width: 50%">
<pre class="mermaid2" style="width: 50%">
sequenceDiagram
title: My Sequence Diagram Title
accTitle: My Acc Sequence Diagram
@@ -141,14 +145,14 @@ flowchart TD
John-->>Alice: Great!
Alice-)John: See you later!
</pre>
<pre class="mermaid" style="width: 50%">
<pre class="mermaid2" style="width: 50%">
graph TD
A -->|000| B
B -->|111| C
linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
</pre>
<pre class="mermaid" style="width: 100%">
<pre class="mermaid2" style="width: 100%">
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description
@@ -162,10 +166,10 @@ graph TD
Go downstairs: 5: Me
Sit down: 5: Me
</pre>
<pre class="mermaid" style="width: 100%">
<pre class="mermaid2" style="width: 100%">
info
</pre>
<pre class="mermaid" style="width: 100%">
<pre class="mermaid2" style="width: 100%">
requirementDiagram
accTitle: My req Diagram
accDescr: My req Diagram Description
@@ -206,7 +210,7 @@ requirementDiagram
test_req - contains -> test_req3
test_req <- copies - test_entity2
</pre>
<pre class="mermaid" style="width: 100%">
<pre class="mermaid2" style="width: 100%">
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
@@ -238,7 +242,7 @@ gantt
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
</pre>
<pre class="mermaid" style="width: 100%">
<pre class="mermaid2" style="width: 100%">
stateDiagram
state Active {
Idle
@@ -266,7 +270,7 @@ stateDiagram
end
B ->> A: Return
</pre>
<pre class="mermaid" style="width: 100%">
<pre class="mermaid2" style="width: 100%">
classDiagram
accTitle: My class diagram
accDescr: My class diagram Description
@@ -291,7 +295,7 @@ class Class10 {
A->>Bob: Hola
Bob-->A: Pasten !
</pre>
<pre class="mermaid" style="width: 100%">
<pre class="mermaid2" style="width: 100%">
gitGraph
commit id: "ZERO"
branch develop
@@ -320,7 +324,7 @@ flowchart TD
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
</pre>
<pre class="mermaid" style="width: 100%">
<pre class="mermaid2" style="width: 100%">
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
@@ -343,7 +347,7 @@ flowchart TD
+run()
}
</pre>
<pre class="mermaid" style="width: 100%">
<pre class="mermaid2" style="width: 100%">
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {

9
cypress/platform/viewer.js
View File

@@ -1,6 +1,9 @@
import { Base64 } from 'js-base64';
import mermaid2 from '../../src/mermaid';
function b64ToUtf8(str) {
return decodeURIComponent(escape(window.atob(str)));
}
/**
* ##contentLoaded Callback function that is called when page is loaded. This functions fetches
* configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
@@ -11,7 +14,7 @@ const contentLoaded = function () {
if (pos > 0) {
pos = pos + 7;
const graphBase64 = document.location.href.substr(pos);
const graphObj = JSON.parse(Base64.decode(graphBase64));
const graphObj = JSON.parse(b64ToUtf8(graphBase64));
if (graphObj.mermaid && graphObj.mermaid.theme === 'dark') {
document.body.style.background = '#3f3f3f';
}
@@ -67,7 +70,7 @@ const contentLoadedApi = function () {
if (pos > 0) {
pos = pos + 7;
const graphBase64 = document.location.href.substr(pos);
const graphObj = JSON.parse(Base64.decode(graphBase64));
const graphObj = JSON.parse(b64ToUtf8(graphBase64));
// const graph = 'hello'
if (Array.isArray(graphObj.code)) {
const numCodes = graphObj.code.length;

4
cypress/platform/webpackUsage.html
View File

@@ -12,6 +12,8 @@
</head>
<body>
<div id="graph-to-be"></div>
<script src="./bundle-test.esm.mjs" type="module" charset="utf-8"></script>
<script type="module" charset="utf-8">
import './bundle-test.js';
</script>
</body>
</html>

2
cypress/platform/xss.html
View File

@@ -1,6 +1,6 @@
<html>
<head>
<script src="/e2e.esm.mjs" type="module"></script>
<script src="./viewer.js" type="module"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<style>
.malware {

299
demos/c4context.html Normal file
View File

@@ -0,0 +1,299 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>C4 Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
/*font-family: 'Courier New', Courier, monospace !important;*/
}
</style>
</head>
<body>
<pre class="mermaid">
C4Context
accTitle: C4 context demo
accDescr: Many large C4 diagrams
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
</pre>
<pre class="mermaid">
C4Container
title Container diagram for Internet Banking System
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
Container_Boundary(c1, "Internet Banking") {
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
}
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Rel(customer, web_app, "Uses", "HTTPS")
UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
Rel(customer, spa, "Uses", "HTTPS")
UpdateRelStyle(customer, spa, $offsetY="-40")
Rel(customer, mobile_app, "Uses")
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
Rel(web_app, spa, "Delivers")
UpdateRelStyle(web_app, spa, $offsetX="130")
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
Rel(email_system, customer, "Sends e-mails to")
UpdateRelStyle(email_system, customer, $offsetX="-45")
Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
UpdateRelStyle(backend_api, email_system, $offsetY="-60")
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
</pre>
<pre class="mermaid">
C4Component
title Component diagram for Internet Banking System - API Application
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Container_Boundary(api, "API Application") {
Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
Rel(sign, security, "Uses")
Rel(accounts, mbsfacade, "Uses")
Rel(security, db, "Read & write to", "JDBC")
Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
}
Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
Rel(spa, accounts, "Uses", "JSON/HTTPS")
Rel(ma, sign, "Uses", "JSON/HTTPS")
Rel(ma, accounts, "Uses", "JSON/HTTPS")
UpdateRelStyle(spa, sign, $offsetY="-40")
UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
UpdateRelStyle(ma, accounts, $offsetY="-40")
UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
UpdateRelStyle(security, db, $offsetY="-40")
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
</pre>
<pre class="mermaid">
C4Dynamic
title Dynamic diagram for Internet Banking System - API Application
ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
Container_Boundary(b, "API Application") {
Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
}
Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
Rel(c2, c3, "Calls isAuthenticated() on")
Rel(c3, c4, "select * from users where username = ?", "JDBC")
UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
</pre>
<pre class="mermaid">
C4Deployment
title Deployment Diagram for Internet Banking System - Live
Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
}
Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
}
}
Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
}
}
Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
}
}
Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
}
}
Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
}
}
}
Rel(mobile, api, "Makes API calls to", "json/HTTPS")
Rel(spa, api, "Makes API calls to", "json/HTTPS")
Rel_U(web, spa, "Delivers to the customer's web browser")
Rel(api, db, "Reads from and writes to", "JDBC")
Rel(api, db2, "Reads from and writes to", "JDBC")
Rel_R(db, db2, "Replicates data to")
UpdateRelStyle(spa, api, $offsetY="-40")
UpdateRelStyle(web, spa, $offsetY="-40")
UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
UpdateRelStyle(db, db2, $offsetY="-10")
</pre>
<hr />
<script src="./mermaid.js"></script>
<script>
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.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
dompurifyConfig: {
USE_PROFILES: {
svg: true,
},
ADD_TAGS: ALLOWED_TAGS,
ADD_ATTR: ['transform-origin'],
},
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
<script>
function testClick(nodeId) {
console.log('clicked', nodeId);
var originalBgColor = document.querySelector('body').style.backgroundColor;
document.querySelector('body').style.backgroundColor = 'yellow';
setTimeout(function () {
document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100);
}
</script>
<script>
const testLineEndings = (test, input) => {
try {
mermaid.render(test, input, () => {
//no-op
});
} catch (err) {
console.error('Error in %s:\n\n%s', test, err);
}
};
testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
</script>
</body>
</html>

99
demos/classchart.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<title>Class diagrams Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
@@ -16,8 +16,9 @@
<body>
<pre class="mermaid">
classDiagram
title Animal Diagram
accDescription The animal class diagram
accTitle: Demo Class Diagram
accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra.
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
@@ -25,6 +26,7 @@
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
@@ -38,12 +40,101 @@
+bool is_wild
+run()
}
</pre>
<hr />
<pre class="mermaid">
classDiagram
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 "0" *-- "0..n" Class04
Class05 "1" o-- "many" Class06
Class07 .. Class08
Class09 "many" --> "1" C2 : Where am i?
Class09 "0" --* "1..n" C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : #size()
Class01 : -int chimp
Class01 : +int gorilla
Class08 <--> C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
size()
}
</pre>
<hr />
<pre class="mermaid">
classDiagram
class Class01~T~
Class01 : #size()
Class01 : -int chimp
Class01 : +int gorilla
class Class10~T~ {
&lt;&lt;service&gt;&gt;
int id
size()
}
</pre>
<hr />
<pre class="mermaid">
classDiagram
Class01~T~ <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03~T~ "0" *-- "0..n" Class04
Class05 "1" o-- "many" Class06
Class07~T~ .. Class08
Class09 "many" --> "1" C2 : Where am i?
Class09 "0" --* "1..n" C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : #size()
Class01 : -int chimp
Class01 : +int gorilla
Class08 <--> C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
size()
}
</pre>
<hr />
<pre class="mermaid">
classDiagram
Interface1 ()-- Interface1Impl
</pre>
<hr />
<pre class="mermaid">
classDiagram
direction LR
Animal ()-- Dog
Dog : bark()
Dog : species()
</pre>
<hr />
<pre class="mermaid">
classDiagram
direction RL
Fruit ()-- Apple
Apple : color()
Apple : -int leafCount()
Fruit ()-- Pineapple
Pineapple : color()
Pineapple : -int leafCount()
Pineapple : -int spikeCount()
</pre>
<hr />
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
theme: 'default',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',

2
demos/dataflowchart.html
View File

@@ -16,6 +16,8 @@
<h2>Data Flow Diagram Example</h2>
<pre class="mermaid">
flowchart LR
accTitle: A simple linear flowchart.
accDescr: A Database has input to a circle System has output to a square Customer.
DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
</pre>

45
demos/er.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<title>ER diagram | Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
@@ -15,18 +15,47 @@
<body>
<pre class="mermaid">
erDiagram
title This is a title
accDescription Test a description
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
%% title This is a title
%% accDescription Test a description
"Person . CUSTOMER"||--o{ ORDER : places
ORDER ||--|{ "€£LINE_ITEM ¥" : contains
"Person . CUSTOMER" }|..|{ "Address//StreetAddress::[DELIVERY ADDRESS]" : uses
"Address//StreetAddress::[DELIVERY ADDRESS]" {
int customerID FK
string line1 "this is the first address line comment"
string line2
string city
string region
string state
string postal_code
string country
}
"a_~`!@#$^&*()-_=+[]{}|/;:'.?¡⁄™€£‹¢›∞fi§‡•°ª·º‚≠±œŒ∑„®†ˇ¥Á¨ˆˆØπ∏“«»åÅßÍ∂΃ϩ˙Ó∆Ô˚¬Ò…ÚæÆΩ¸≈π˛çÇ√◊∫ı˜µÂ≤¯≥˘÷¿" {
string name "this is an entity with an absurd name just to show characters that are now acceptable as long as the name is in double quotes"
}
"€£LINE_ITEM ¥" {
int orderID FK
int currencyId FK
number price
number quantity
number adjustment
number final_price
}
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
import mermaid from '../src/mermaid';
mermaid.initialize({
theme: 'forest',
theme: 'default',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',

389
demos/flowchart.html
View File

@@ -19,6 +19,9 @@
<h3>graph</h3>
<pre class="mermaid">
graph LR
accTitle: This is a complicated flow
accDescr: This is the descriptoin for the complicated flow.
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
提交申请
@@ -220,8 +223,8 @@
<h3>graph</h3>
<pre class="mermaid">
graph TD
title What to buy
accDescription Options of what to buy with Christmas money
accTitle: What to buy
accDescr: Options of what to buy with Christmas money
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
C -->|One| D[Laptop]
@@ -232,8 +235,8 @@
<h3>flowchart</h3>
<pre class="mermaid">
flowchart TD
title What to buy
accDescription Options of what to buy with Christmas money
accTitle: What to buy
accDescr: Options of what to buy with Christmas money
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
C -->|One| D[Laptop]
@@ -1087,6 +1090,384 @@
<hr />
<hr />
<pre class="mermaid">
graph LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
提交申请
熊大
"];
class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
负责人审批
强子
"];
class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
DBA审批
强子
"];
class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
SA审批
阿美
"];
class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
主管审批
光头强
"];
class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
DBA确认
强子
"];
class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
SA确认
阿美
"];
class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
结束
"];
class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
SA执行1
强子
"];
class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
sid-6C2120F3-D940-4958-A067-0903DCE879C4["
SA执行2
强子
"];
class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
DBA执行1
强子
"];
class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
DBA执行3
强子
"];
class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
DBA执行2
强子
"];
class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
DBA执行4
强子
"];
class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
负责人确认
梁静茹
"];
class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
</pre>
<pre class="mermaid">
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssssx<br />sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
</pre>
<pre class="mermaid">
graph TD
A[/Christmas\]
A -->|Get money| B[\Go shopping/]
B --> C{Let me thinksssss<br />ssssssssssssssssssssss<br />sssssssssssssssssssssssssss}
C -->|One| D[/Laptop/]
C -->|Two| E[\iPhone\]
C -->|Three| F[Car]
</pre>
<pre class="mermaid">
graph LR
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
</pre>
<pre class="mermaid">
graph TD
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
</pre>
<pre class="mermaid">
graph TB
subgraph One
a1-->a2
end
</pre>
<pre class="mermaid">
graph TB
A
B
subgraph foo[Foo SubGraph]
C
D
end
subgraph bar[Bar SubGraph]
E
F
end
G
A-->B
B-->C
C-->D
B-->D
D-->E
E-->A
E-->F
F-->D
F-->G
B-->G
G-->D
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</pre>
<pre class="mermaid">
graph LR
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
6000"
click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
600"
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre class="mermaid">
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
click A "index.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
</pre>
<pre class="mermaid">
graph TD
A([stadium shape test])
A -->|Get money| B([Go shopping])
B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
C -->|One| D([Laptop])
C -->|Two| E([iPhone])
C -->|Three| F([Car<br />wroom wroom])
click A "index.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
</pre>
<pre class="mermaid">
graph LR
A[[subroutine shape test]]
A -->|Get money| B[[Go shopping]]
B --> C[[Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]]
C -->|One| D[[Laptop]]
C -->|Two| E[[iPhone]]
C -->|Three| F[[Car<br />wroom wroom]]
click A "index.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
</pre>
<pre class="mermaid">
graph LR
A[(cylindrical<br />shape<br />test)]
A -->|Get money| B1[(Go shopping 1)]
A -->|Get money| B2[(Go shopping 2)]
A -->|Get money| B3[(Go shopping 3)]
C[(Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?)]
B1 --> C
B2 --> C
B3 --> C
C -->|One| D[(Laptop)]
C -->|Two| E[(iPhone)]
C -->|Three| F[(Car)]
click A "index.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
</pre>
<pre class="mermaid">
graph LR
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
C1[Multi<br />Line] -->|Multi<br />Line| D1(Multi<br />Line)
E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
C2[Multi<br />Line] -->|Multi<br />Line| D2(Multi<br />Line)
E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
linkStyle 0 stroke:DarkGray,stroke-width:2px
linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px
</pre>
<pre class="mermaid">
graph LR
A(( )) -->|step 1| B(( ))
B(( )) -->|step 2| C(( ))
C(( )) -->|step 3| D(( ))
linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px
</pre>
<pre class="mermaid">
graph TB
TITLE["Link Click Events<br>(click the nodes below)"]
A["link test (open in same tab)"]
B["link test (open in new tab)"]
C[anchor test]
D[mailto test]
E[other protocol test]
F[script test]
TITLE --> A & B & C & D & E & F
click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
click C "#link-clicked"
click D "mailto:user@user.user" "mailto test"
click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test"
</pre>
<hr />
<pre class="mermaid">
graph LR
A[red<br>text] -->|red<br>text| B(blue<br>text)
C[/red<br />text/] -->|blue<br />text| D{blue<br />text}
E{{default<br />style}} -->|default<br />style| F([default<br />style])
linkStyle default color:Sienna;
linkStyle 0 color:red;
linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
style A color:red;
style B color:blue;
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
click B "index.html#link-clicked" "link test"
click D testClick "click test"
</pre>
<pre class="mermaid">
graph TD
A[myClass1] --> B[default] & C[default]
B[default] & C[default] --> D[myClass2]
classDef default stroke-width:2px,fill:none,stroke:silver
classDef node color:red
classDef myClass1 color:#0000ff
classDef myClass2 stroke:#0000ff,fill:#ccccff
class A myClass1
class D myClass2
</pre>
<h1 id="link-clicked">Anchor for "link-clicked" test</h1>
<script src="./mermaid.js"></script>

147
demos/gantt.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<title>Gantt | Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
@@ -15,9 +15,10 @@
<body>
<!-- accDescription Tasks for Q4 -->
<pre class="mermaid">
gantt
gantt
title A Gantt Diagram
accDescription Remaining Q4 Tasks
accTitle: A simple sample gantt diagram
accDescr: 2 sections with 2 tasks each, from 2014
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
@@ -25,11 +26,147 @@ gantt
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
</pre>
<pre class="mermaid">
gantt
title Airworks roadmap
dateFormat YYYY-MM-DD
axisFormat %m-%d %a
excludes weekends, 2021-10-01,2021-10-04,2021-10-05,2021-10-06,2021-10-07
includes 2021-10-09
</pre
>
section Airworks 3.4.1
开发 :b, 2021-10-07, 5d
测试 :after b, 4d
OK :milestore
section Airworks 3.4.2
开发 :a, 2021-10-09, 4d
测试 :after a, 4d
</pre>
<pre class="mermaid">
gantt
title Exclusive end dates (Manual date should end on 3d)
dateFormat YYYY-MM-DD
axisFormat %d
section Section1
2 Days: 1, 2019-01-01,2d
Manual Date: 2, 2019-01-01,2019-01-03
</pre>
<pre class="mermaid">
gantt
title Inclusive end dates (Manual date should end on 4th)
dateFormat YYYY-MM-DD
axisFormat %d
inclusiveEndDates
section Section1
2 Days: 1, 2019-01-01,2d
Manual Date: 2, 2019-01-01,2019-01-03
</pre>
<pre class="mermaid">
gantt
title Hide today marker (vertical line should not be visible)
dateFormat YYYY-MM-DD
axisFormat %d
todayMarker off
section Section1
Today: 1, -1h
</pre>
<pre class="mermaid">
gantt
title Style today marker (vertical line should be 5px wide and half-transparent blue)
dateFormat YYYY-MM-DD
axisFormat %d
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
section Section1
Today: 1, -1h
</pre>
<pre class="mermaid">
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Clickable
Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
Calling a Callback (look at the console log) :cl2, after cl1, 3d
click cl1 href "https://mermaidjs.github.io/"
click cl2 call ganttTestClick("test", test, test)
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
</pre>
<pre class="mermaid">
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m
title GANTT diagram with multiline section titles
excludes weekdays 2014-01-10
section A section<br>multiline
Completed task : done, des1, 2014-01-06,2014-01-08
Active task : active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks<br />multiline
Completed task in the critical line : crit, done, 2014-01-06, 24h
Implement parser and jison : crit, done, after des1, 2d
Create tests for parser : crit, active, 3d
Future task in critical line : crit, 5d
Create tests for renderer : 2d
Add to mermaid : 1d
section Documentation<br />multiline
Describe gantt syntax : active, a1, after des1, 3d
Add gantt diagram to demo page : after a1, 20h
Add another diagram to demo page : doc1, after a1, 48h
section Last section<br />multiline
Describe gantt syntax : after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
</pre>
<script>
function ganttTestClick(a, b, c) {
console.log('a:', a);
console.log('b:', b);
console.log('c:', c);
}
function testClick(nodeId) {
console.log('clicked', nodeId);
var originalBgColor = document.querySelector('body').style.backgroundColor;
document.querySelector('body').style.backgroundColor = 'yellow';
setTimeout(function () {
document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100);
}
</script>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({

94
demos/git.html Normal file
View File

@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Git Graphs Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<pre class="mermaid">
gitGraph:
options
{
"nodeSpacing": 50,
"nodeRadius": 5
}
end
branch master
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
</pre>
<script src="./mermaid.js"></script>
<script>
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.initialize({
theme: 'default',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
dompurifyConfig: {
USE_PROFILES: {
svg: true,
},
ADD_TAGS: ALLOWED_TAGS,
ADD_ATTR: ['transform-origin'],
},
});
</script>
</body>
</html>

1030
demos/index.html
View File

File diff suppressed because it is too large Load Diff

8
demos/journey.html
View File

@@ -16,15 +16,17 @@
<body>
<pre class="mermaid">
journey
title My day
accDescription A user journey diagram of a typical day in my life
title My working day
accTitle: Very simple journey demo
accDescr: 2 main sections: work and home, each with just a few tasks
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
Sit down: 3: Me
</pre>
<script src="./mermaid.js"></script>

51
demos/pie.html Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<pre class="mermaid">
pie title Pets adopted by volunteers
accTitle: simple pie char demo
accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
"Dogs" : 386
"Cats" : 85
"Rats" : 15
</pre>
<pre class="mermaid">
pie
title Key elements in Product X
accTitle: Key elements in Product X
accDescr: This is a pie chart showing the key elements in Product X.
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
</pre>
<script type="module">
import mermaid from '../src/mermaid';
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
// flowchart: { curve: 'basis' },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
</html>

79
demos/requirements.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<title>Requirements Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
@@ -16,7 +16,9 @@
<body>
<pre class="mermaid">
requirementDiagram
title This is a title
accTitle: Requirments demo in black and white
accDescr: A series of requirement boxes showing relationships among them. Has meaningless task names
requirement test_req {
id: 1
text: the test text.
@@ -84,11 +86,82 @@
test_req <- copies - test_entity2
</pre
>
<hr />
<pre class="mermaid">
requirementDiagram
requirement An Example {
id: 1
text: the test text.
risk: high
verifymethod: test
}
functionalRequirement Random Name {
id: 1.1
text: the second test text.
risk: low
verifymethod: inspection
}
performanceRequirement Something Else {
id: 1.2
text: the third test text.
risk: medium
verifymethod: demonstration
}
interfaceRequirement test_req4 {
id: 1.2.1
text: the fourth test text.
risk: medium
verifymethod: analysis
}
physicalRequirement test_req5 {
id: 1.2.2
text: the fifth test text.
risk: medium
verifymethod: analysis
}
designConstraint test_req6 {
id: 1.2.3
text: really long text to test overflow. really long text to test overflow. really long text to test overflow.
risk: medium
verifymethod: analysis
}
element test_entity {
type: simulation
}
element test_entity2 {
type: word doc
docRef: reqs/test_entity
}
element test_entity3 {
type: "test suite"
docRef: github.com/all_the_tests
}
test_entity - satisfies -> Random Name
An Example - traces -> Random Name
An Example - contains -> Something Else
Something Else - contains -> test_req4
test_req4 - derives -> test_req5
test_req5 - refines -> test_req6
test_entity3 - verifies -> test_req5
An Example <- copies - test_entity2
</pre>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
theme: 'neutral',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',

73
demos/sequence.html
View File

@@ -16,20 +16,24 @@
<body>
<pre class="mermaid">
sequenceDiagram
title: FancySequenceDiagram
accDescription Test a description
accTitle: test the accTitle
accDescr: Test a description
participant Alice
participant Bob
participant John as John<br />Second Line
autonumber 10 10
rect rgb(200, 220, 100)
rect rgb(200, 255, 200)
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
end
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
Bob-->Alice: Checking with John...
Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
Bob-x John: Hey John - we're still waiting to know<br />how you're doing
@@ -37,6 +41,7 @@
Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
Note over John: After a few more moments, John<br />finally snaps out of it.
end
autonumber off
alt either this
Alice->>+John: Yes
@@ -55,10 +60,72 @@
end
</pre>
<pre class="mermaid">
sequenceDiagram
accTitle: Sequence diagram title is here
accDescr: Hello friends
participant Alice
participant Bob
participant John as John<br />Second Line
rect rgb(200, 220, 100)
rect rgb(200, 255, 200)
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
end
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
Bob-->Alice: Checking with John...
Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
Bob-x John: Hey John - we're still waiting to know<br />how you're doing
Note over John:nowrap: John's trying hard not to break his train of thought.
Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
Note over John: After a few more moments, John<br />finally snaps out of it.
end
alt either this
Alice->>John: Yes
else or this
Alice->>John: No
else or this will happen
Alice->John: Maybe
end
par this happens in parallel
Alice -->> Bob: Parallel message 1
and
Alice -->> John: Parallel message 2
end
</pre>
<pre class="mermaid">
sequenceDiagram
participant 1 as multiline<br>using #lt;br#gt;
participant 2 as multiline<br />using #lt;br/#gt;
participant 3 as multiline<br />using #lt;br /#gt;
participant 4 as multiline<br />using #lt;br /#gt;
1->>2: multiline<br>using #lt;br#gt;
note right of 2: multiline<br>using #lt;br#gt;
2->>3: multiline<br />using #lt;br/#gt;
note right of 3: multiline<br />using #lt;br/#gt;
3->>4: multiline<br />using #lt;br /#gt;
note right of 4: multiline<br />using #lt;br /#gt;
4->>1: multiline<br />using #lt;br /#gt;
note right of 1: multiline<br />using #lt;br /#gt;
</pre>
<pre class="mermaid">
sequenceDiagram
autonumber
Alice->>John: Hello John,<br>how are you?
autonumber 50 10
Alice->>John: John,<br />can you hear me?
John-->>Alice: Hi Alice,<br />I can hear you!
autonumber off
John-->>Alice: I feel great!
</pre>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
theme: 'base',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',

58
demos/state.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<title>States Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
@@ -16,22 +16,66 @@
<body>
<pre class="mermaid">
stateDiagram
title This is a title
accDescription This is an accessible description
State1
accTitle: This is the accessible title
accDescr:This is an accessible description
State1 --> State2
</pre>
<hr />
<pre class="mermaid">
stateDiagram-v2
title This is a title
accDescription This is an accessible description
accTitle: This is the accessible title
accDescr: This is an accessible description
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
</pre>
<hr />
<pre class="mermaid">
stateDiagram
accTitle: very very simple state
accDescr: This is a state diagram showing one state
State1
</pre>
<hr />
<pre class="mermaid">
stateDiagram
[*] --> First
state First {
[*] --> second
second --> [*]
}
</pre>
<pre class="mermaid">
stateDiagram
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left.
</pre>
<pre class="mermaid">
stateDiagram
State1
note right of State1
Line1<br>Line2<br />Line3<br />Line4<br />Line5
end note
</pre>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
theme: 'base',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',

2
docs/flowchart.md
View File

@@ -679,6 +679,8 @@ flowchart LR
B1 --> B2
```
**A clarification is in order here.** The direction statement affects the layout of a subgraph but only as long as it does not have any links leading in or out of it. The reason for this is that if you have links in or out then the graph of nodes is not longer the set of nodes in the subgraph but actually the set of nodes of the parent including the ones in the subgraph. One can see it as that the direction of the container gets injected in the subgraph with a link.
## Interaction
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.

1
docs/integrations.md
View File

@@ -19,6 +19,7 @@ They also serve as proof of concept, for the variety of things that can be built
- [Joplin](https://joplinapp.org) (**Native support**)
- [Notion](https://notion.so) (**Native support**)
- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
- [Obsidian](https://help.obsidian.md/How+to/Format+your+notes#Diagram) (**Native support**)
- [GitBook](https://gitbook.com)
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)

22
package.json
View File

@@ -25,13 +25,12 @@
],
"scripts": {
"clean": "rimraf dist",
"build:code": "node .esbuild/esbuild.cjs",
"build:vite": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts",
"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",
"docs:build": "ts-node-esm src/docs.mts",
"build": "yarn clean; concurrently \"yarn build:vite\" \"yarn build:types\"",
"dev": "concurrently \"yarn build:vite --watch\" \"ts-node-esm .vite/server\"",
"docs:build": "ts-node-esm --transpileOnly src/docs.mts",
"docs:verify": "yarn docs:build --verify",
"vdocs:dev": "vitepress dev vdocs",
"vdocs:build": "vitepress build vdocs",
@@ -40,7 +39,7 @@
"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",
"lint:jison": "ts-node-esm --transpileOnly src/jison/lint.mts",
"cypress": "cypress run",
"cypress:open": "cypress open",
"e2e": "start-server-and-test dev http://localhost:9000/ cypress",
@@ -69,6 +68,7 @@
},
"dependencies": {
"@braintree/sanitize-url": "^6.0.0",
"@types/uuid": "^8.3.4",
"d3": "^7.0.0",
"dagre": "^0.8.5",
"dagre-d3": "^0.6.4",
@@ -79,7 +79,8 @@
"lodash": "^4.17.21",
"moment-mini": "^2.24.0",
"non-layered-tidy-tree-layout": "^2.0.2",
"stylis": "^4.1.2"
"stylis": "^4.1.2",
"uuid": "^9.0.0"
},
"devDependencies": {
"@applitools/eyes-cypress": "^3.25.7",
@@ -91,7 +92,7 @@
"@types/express": "^4.17.13",
"@types/jsdom": "^20.0.0",
"@types/lodash": "^4.14.185",
"@types/prettier": "^2.7.0",
"@types/prettier": "^2.7.1",
"@types/stylis": "^4.0.2",
"@typescript-eslint/eslint-plugin": "^5.37.0",
"@typescript-eslint/parser": "^5.37.0",
@@ -102,7 +103,7 @@
"cypress": "^10.0.0",
"cypress-image-snapshot": "^4.0.1",
"esbuild": "^0.15.8",
"eslint": "^8.23.1",
"eslint": "^8.24.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-html": "^7.1.0",
@@ -115,7 +116,6 @@
"husky": "^8.0.0",
"identity-obj-proxy": "^3.0.0",
"jison": "^0.4.18",
"js-base64": "3.7.2",
"jsdom": "^20.0.0",
"lint-staged": "^13.0.0",
"markdown-it": "^13.0.1",
@@ -125,6 +125,7 @@
"prettier-plugin-jsdoc": "^0.4.2",
"remark": "^14.0.2",
"rimraf": "^3.0.2",
"rollup": "^2.79.1",
"start-server-and-test": "^1.12.6",
"ts-node": "^10.9.1",
"typescript": "^4.8.3",
@@ -132,6 +133,7 @@
"vitepress": "^1.0.0-alpha.16",
"vitepress-plugin-mermaid": "^2.0.8",
"vitepress-plugin-search": "^1.0.4-alpha.11",
"vite": "^3.0.9",
"vitest": "^0.23.1"
},
"resolutions": {

100
src/diagrams/er/erRenderer.js
View File

@@ -1,7 +1,5 @@
import graphlib from 'graphlib';
import { line, curveBasis, select } from 'd3';
// import erDb from './erDb';
// import erParser from './parser/erDiagram';
import dagre from 'dagre';
import { getConfig } from '../../config';
import { log } from '../../logger';
@@ -9,9 +7,17 @@ import erMarkers from './erMarkers';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
import { parseGenericTypes } from '../common/common';
import { v4 as uuid4 } from 'uuid';
/** Regex used to remove chars from the entity name so the result can be used in an id */
const BAD_ID_CHARS_REGEXP = /[^A-Za-z0-9]([\W])*/g;
// Configuration
let conf = {};
// Map so we can look up the id of an entity based on the name
let entityNameIds = new Map();
/**
* Allows the top-level API module to inject config specific to this renderer, storing it in the
* local conf object. Note that generic config still needs to be retrieved using getConfig()
@@ -31,8 +37,10 @@ export const setConf = function (cnf) {
*
* @param groupNode The svg group node for the entity
* @param entityTextNode The svg node for the entity label text
* @param attributes An array of attributes defined for the entity (each attribute has a type and a name)
* @returns {object} The bounding box of the entity, after attributes have been added. The bounding box has a .width and .height
* @param attributes An array of attributes defined for the entity (each attribute has a type and a
* name)
* @returns {object} The bounding box of the entity, after attributes have been added. The bounding
* box has a .width and .height
*/
const drawAttributes = (groupNode, entityTextNode, attributes) => {
const heightPadding = conf.entityPadding / 3; // Padding internal to attribute boxes
@@ -288,7 +296,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
heightOffset += attributeNode.height + heightPadding * 2;
// Flip the attribute style for row banding
attribStyle = attribStyle == 'attributeBoxOdd' ? 'attributeBoxEven' : 'attributeBoxOdd';
attribStyle = attribStyle === 'attributeBoxOdd' ? 'attributeBoxEven' : 'attributeBoxOdd';
});
} else {
// Ensure the entity box is a decent size without any attributes
@@ -313,15 +321,18 @@ const drawEntities = function (svgNode, entities, graph) {
const keys = Object.keys(entities);
let firstOne;
keys.forEach(function (id) {
// Create a group for each entity
const groupNode = svgNode.append('g').attr('id', id);
keys.forEach(function (entityName) {
const entityId = generateId(entityName, 'entity');
entityNameIds.set(entityName, entityId);
firstOne = firstOne === undefined ? id : firstOne;
// Create a group for each entity
const groupNode = svgNode.append('g').attr('id', entityId);
firstOne = firstOne === undefined ? entityId : firstOne;
// Label the entity - this is done first so that we can get the bounding box
// which then determines the size of the rectangle
const textId = 'entity-' + id;
const textId = 'text-' + entityId;
const textNode = groupNode
.append('text')
.attr('class', 'er entityLabel')
@@ -334,12 +345,12 @@ const drawEntities = function (svgNode, entities, graph) {
'style',
'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'
)
.text(id);
.text(entityName);
const { width: entityWidth, height: entityHeight } = drawAttributes(
groupNode,
textNode,
entities[id].attributes
entities[entityName].attributes
);
// Draw the rectangle - insert it before the text so that the text is not obscured
@@ -356,12 +367,12 @@ const drawEntities = function (svgNode, entities, graph) {
const rectBBox = rectNode.node().getBBox();
// Add the entity to the graph
graph.setNode(id, {
// Add the entity to the graph using the entityId
graph.setNode(entityId, {
width: rectBBox.width,
height: rectBBox.height,
shape: 'rect',
id: id,
id: entityId,
});
});
return firstOne;
@@ -382,9 +393,16 @@ const adjustEntities = function (svgNode, graph) {
);
}
});
return;
};
/**
* Construct a name for an edge based on the names of the 2 entities and the role (relationship)
* between them. Remove any spaces from it
*
* @param rel - A (parsed) relationship (e.g. one of the objects in the list returned by
* erDb.getRelationships)
* @returns {string}
*/
const getEdgeName = function (rel) {
return (rel.entityA + rel.roleA + rel.entityB).replace(/\s/g, '');
};
@@ -393,12 +411,17 @@ const getEdgeName = function (rel) {
* Add each relationship to the graph
*
* @param relationships The relationships to be added
* @param g The graph
* @param {Graph} g The graph
* @returns {Array} The array of relationships
*/
const addRelationships = function (relationships, g) {
relationships.forEach(function (r) {
g.setEdge(r.entityA, r.entityB, { relationship: r }, getEdgeName(r));
g.setEdge(
entityNameIds.get(r.entityA),
entityNameIds.get(r.entityB),
{ relationship: r },
getEdgeName(r)
);
});
return relationships;
}; // addRelationships
@@ -418,7 +441,11 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
relCnt++;
// Find the edge relating to this relationship
const edge = g.edge(rel.entityA, rel.entityB, getEdgeName(rel));
const edge = g.edge(
entityNameIds.get(rel.entityA),
entityNameIds.get(rel.entityB),
getEdgeName(rel)
);
// Get a function that will generate the line path
const lineFunction = line()
@@ -535,8 +562,6 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
.attr('height', labelBBox.height)
.attr('fill', 'white')
.attr('fill-opacity', '85%');
return;
};
/**
@@ -552,7 +577,7 @@ export const draw = function (text, id, _version, diagObj) {
log.info('Drawing ER diagram');
// diag.db.clear();
const securityLevel = getConfig().securityLevel;
// Handle root and Document for when rendering in sanbox mode
// Handle root and Document for when rendering in sandbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
@@ -581,7 +606,7 @@ export const draw = function (text, id, _version, diagObj) {
// 1. Create all the entities in the svg node at 0,0, but with the correct dimensions (allowing for text content)
// 2. Make sure they are all added to the graph
// 3. Add all the edges (relationships) to the graph as well
// 4. Let dagre do its magic to layout the graph. This assigns:
// 4. Let dagre do its magic to lay out the graph. This assigns:
// - the centre co-ordinates for each node, bearing in mind the dimensions and edge relationships
// - the path co-ordinates for each edge
// But it has no impact on the svg child nodes - the diagram remains with every entity rooted at 0,0
@@ -647,6 +672,35 @@ export const draw = function (text, id, _version, diagObj) {
addSVGAccessibilityFields(diagObj.db, svg, id);
}; // draw
/**
* Return a unique id based on the given string. Start with the prefix, then a hyphen, then the
* simplified str, then a hyphen, then a unique uuid. (Hyphens are only included if needed.)
* Although the official XML standard for ids says that many more characters are valid in the id,
* this keeps things simple by accepting only A-Za-z0-9.
*
* @param {string} [str?=''] Given string to use as the basis for the id. Default is `''`
* @param {string} [prefix?=''] String to put at the start, followed by '-'. Default is `''`
* @param str
* @param prefix
* @returns {string}
* @see https://www.w3.org/TR/xml/#NT-Name
*/
export function generateId(str = '', prefix = '') {
const simplifiedStr = str.replace(BAD_ID_CHARS_REGEXP, '');
return `${strWithHyphen(prefix)}${strWithHyphen(simplifiedStr)}${uuid4()}`;
}
/**
* Append a hyphen to a string only if the string isn't empty
*
* @param {string} str
* @returns {string}
* @todo This could be moved into a string utility file/class.
*/
function strWithHyphen(str = '') {
return str.length > 0 ? `${str}-` : '';
}
export default {
setConf,
draw,

6
src/diagrams/er/parser/erDiagram.jison
View File

@@ -24,6 +24,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
[\n]+ return 'NEWLINE';
\s+ /* skip whitespace */
[\s]+ return 'SPACE';
\"[^"%\r\n\v\b\\]+\" return 'ENTITY_NAME';
\"[^"]*\" return 'WORD';
"erDiagram" return 'ER_DIAGRAM';
"{" { this.begin("block"); return 'BLOCK_START'; }
@@ -102,8 +103,8 @@ statement
;
entityName
: 'ALPHANUM' { $$ = $1; /*console.log('Entity: ' + $1);*/ }
| 'ALPHANUM' '.' entityName { $$ = $1 + $2 + $3; }
: 'ALPHANUM' { $$ = $1; }
| 'ENTITY_NAME' { $$ = $1.replace(/"/g, ''); }
;
attributes
@@ -156,6 +157,7 @@ relType
role
: 'WORD' { $$ = $1.replace(/"/g, ''); }
| 'ENTITY_NAME' { $$ = $1.replace(/"/g, ''); }
| 'ALPHANUM' { $$ = $1; }
;

126
src/diagrams/er/parser/erDiagram.spec.js
View File

@@ -1,6 +1,6 @@
import { setConfig } from '../../../config';
import erDb from '../erDb';
import erDiagram from './erDiagram';
import erDiagram from './erDiagram'; // jison file
setConfig({
securityLevel: 'strict',
@@ -21,14 +21,118 @@ describe('when parsing ER diagram it...', function () {
expect(erDb.getRelationships().length).toBe(0);
});
it('should allow hyphens and underscores in entity names', function () {
const line1 = 'DUCK-BILLED-PLATYPUS';
const line2 = 'CHARACTER_SET';
erDiagram.parser.parse(`erDiagram\n${line1}\n${line2}`);
describe('entity name', () => {
it('cannot be empty quotes ""', function () {
const name = '""';
expect(() => {
erDiagram.parser.parse(`erDiagram\n ${name}\n`);
const entities = erDb.getEntities();
expect(entities.hasOwnProperty('DUCK-BILLED-PLATYPUS')).toBe(true);
expect(entities.hasOwnProperty('CHARACTER_SET')).toBe(true);
expect(entities.hasOwnProperty(name)).toBe(false);
}).toThrow();
});
describe('has non A-Za-z0-9_- chars', function () {
// these were entered using the Mac keyboard utility.
const chars =
"~ ` ! @ # $ ^ & * ( ) - _ = + [ ] { } | / ; : ' . ? ¡ ⁄ ™ € £ ‹ ¢ › ∞ fi § ‡ • ° ª · º ‚ ≠ ± œ Œ ∑ „ ® † ˇ ¥ Á ¨ ˆ ˆ Ø π ∏ “ « » å Å ß Í ∂ Î ƒ Ï © ˙ Ó ∆ Ô ˚  ¬ Ò … Ú æ Æ Ω ¸ ≈ π ˛ ç Ç √ ◊ ∫ ı ˜ µ  ≤ ¯ ≥ ˘ ÷ ¿";
const allowed = chars.split(' ');
allowed.forEach((allowedChar) => {
const singleOccurrence = `Blo${allowedChar}rf`;
const repeatedOccurrence = `Blo${allowedChar}${allowedChar}rf`;
const cannontStartWith = `${allowedChar}Blorf`;
const endsWith = `Blorf${allowedChar}`;
it(`${singleOccurrence} fails if not surrounded by quotes`, function () {
const name = singleOccurrence;
expect(() => {
erDiagram.parser.parse(`erDiagram\n ${name}\n`);
const entities = erDb.getEntities();
expect(entities.hasOwnProperty(name)).toBe(false);
}).toThrow();
});
it(`"${singleOccurrence}" single occurrence`, function () {
const name = singleOccurrence;
erDiagram.parser.parse(`erDiagram\n "${name}"\n`);
const entities = erDb.getEntities();
expect(entities.hasOwnProperty(name)).toBe(true);
});
it(`"${repeatedOccurrence}" repeated occurrence`, function () {
const name = repeatedOccurrence;
erDiagram.parser.parse(`erDiagram\n "${name}"\n`);
const entities = erDb.getEntities();
expect(entities.hasOwnProperty(name)).toBe(true);
});
it(`"${singleOccurrence}" ends with`, function () {
const name = endsWith;
erDiagram.parser.parse(`erDiagram\n "${name}"\n`);
const entities = erDb.getEntities();
expect(entities.hasOwnProperty(name)).toBe(true);
});
it(`"${cannontStartWith}" cannot start with the character`, function () {
const name = repeatedOccurrence;
expect(() => {
erDiagram.parser.parse(`erDiagram\n "${name}"\n`);
const entities = erDb.getEntities();
expect(entities.hasOwnProperty(name)).toBe(false);
}).toThrow();
});
});
const allCombined = allowed.join('');
it(`a${allCombined} (all non-alphanumerics) in one, starting with 'a'`, function () {
const name = 'a' + allCombined;
erDiagram.parser.parse(`erDiagram\n "${name}"\n`);
const entities = erDb.getEntities();
expect(entities.hasOwnProperty(name)).toBe(true);
});
});
it('cannot contain % because it interfers with parsing comments', function () {
expect(() => {
erDiagram.parser.parse(`erDiagram\n "Blo%rf"\n`);
const entities = erDb.getEntities();
expect(entities.hasOwnProperty(name)).toBe(false);
}).toThrow();
});
it('cannot contain \\ because it could start and escape code', function () {
expect(() => {
erDiagram.parser.parse(`erDiagram\n "Blo\\rf"\n`);
const entities = erDb.getEntities();
expect(entities.hasOwnProperty(name)).toBe(false);
}).toThrow();
});
it('cannot newline, backspace, or vertical characters', function () {
const disallowed = ['\n', '\r', '\b', '\v'];
disallowed.forEach((badChar) => {
const badName = `Blo${badChar}rf`;
expect(() => {
erDiagram.parser.parse(`erDiagram\n "${badName}"\n`);
const entities = erDb.getEntities();
expect(entities.hasOwnProperty(badName)).toBe(false);
}).toThrow();
});
});
// skip this: jison cannot handle non-english letters
it.skip('[skipped test] can contain àáâäæãåā', function () {
const beyondEnglishName = 'DUCK-àáâäæãåā';
erDiagram.parser.parse(`erDiagram\n${beyondEnglishName}\n`);
const entities = erDb.getEntities();
expect(entities.hasOwnProperty(beyondEnglishName)).toBe(true);
});
it('can contain - _ without needing ""', function () {
const hyphensUnderscore = 'DUCK-BILLED_PLATYPUS';
erDiagram.parser.parse(`erDiagram\n${hyphensUnderscore}\n`);
const entities = erDb.getEntities();
expect(entities.hasOwnProperty(hyphensUnderscore)).toBe(true);
});
});
it('should allow an entity with a single attribute to be defined', function () {
@@ -447,6 +551,7 @@ describe('when parsing ER diagram it...', function () {
}).toThrowError();
});
describe('relationship labels', function () {
it('should allow an empty quoted label', function () {
erDiagram.parser.parse('erDiagram\nCUSTOMER ||--|{ ORDER : ""');
const rels = erDb.getRelationships();
@@ -464,10 +569,5 @@ describe('when parsing ER diagram it...', function () {
const rels = erDb.getRelationships();
expect(rels[0].roleA).toBe('places');
});
it('should allow an entity name with a dot', function () {
erDiagram.parser.parse('erDiagram\nCUSTOMER.PROP ||--|{ ORDER : places');
const rels = erDb.getRelationships();
expect(rels[0].entityA).toBe('CUSTOMER.PROP');
});
});

4
src/diagrams/er/styles.js
View File

@@ -6,12 +6,12 @@ const getStyles = (options) =>
}
.attributeBoxOdd {
fill: #ffffff;
fill: ${options.attributeBackgroundColorOdd};
stroke: ${options.nodeBorder};
}
.attributeBoxEven {
fill: #f2f2f2;
fill: ${options.attributeBackgroundColorEven};
stroke: ${options.nodeBorder};
}

2
src/diagrams/sequence/parser/sequenceDiagram.jison
View File

@@ -37,7 +37,7 @@
[0-9]+(?=[ \n]+) return 'NUM';
"participant" { this.begin('ID'); return 'participant'; }
"actor" { this.begin('ID'); return 'participant_actor'; }
<ID>[^\->:\n,;]+?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
<ID>[^\->:\n,;]+?([\-]*[^\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
<ALIAS>"as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
<ALIAS>(?:) { this.popState(); this.popState(); return 'NEWLINE'; }
"loop" { this.begin('LINE'); return 'loop'; }

24
src/diagrams/sequence/sequenceDiagram.spec.js
View File

@@ -249,7 +249,7 @@ Bob-->Alice-in-Wonderland:I am good thanks!`;
mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors['Alice-in-Wonderland'].description).toBe('Alice-in-Wonderland');
actors.Bob.description = 'Bob';
expect(actors.Bob.description).toBe('Bob');
const messages = diagram.db.getMessages();
@@ -257,6 +257,28 @@ Bob-->Alice-in-Wonderland:I am good thanks!`;
expect(messages[0].from).toBe('Alice-in-Wonderland');
expect(messages[1].from).toBe('Bob');
});
it('should handle dashes in participant names', function () {
const str = `
sequenceDiagram
participant Alice-in-Wonderland
participant Bob
Alice-in-Wonderland->Bob:Hello Bob, how are - you?
Bob-->Alice-in-Wonderland:I am good thanks!`;
mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(Object.keys(actors)).toEqual(['Alice-in-Wonderland', 'Bob']);
expect(actors['Alice-in-Wonderland'].description).toBe('Alice-in-Wonderland');
expect(actors.Bob.description).toBe('Bob');
const messages = diagram.db.getMessages();
expect(messages.length).toBe(2);
expect(messages[0].from).toBe('Alice-in-Wonderland');
expect(messages[1].from).toBe('Bob');
});
it('should alias participants', function () {
const str = `
sequenceDiagram

2
src/diagrams/user-journey/styles.js
View File

@@ -132,8 +132,6 @@ const getStyles = (options) =>
.actor-5 {
${options.actor5 ? `fill: ${options.actor5}` : ''};
}
}
`;
export default getStyles;

2
src/docs/flowchart.md
View File

@@ -424,6 +424,8 @@ flowchart LR
B1 --> B2
```
**A clarification is in order here.** The direction statement affects the layout of a subgraph but only as long as it does not have any links leading in or out of it. The reason for this is that if you have links in or out then the graph of nodes is not longer the set of nodes in the subgraph but actually the set of nodes of the parent including the ones in the subgraph. One can see it as that the direction of the container gets injected in the subgraph with a link.
## Interaction
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.

1
src/docs/integrations.md
View File

@@ -17,6 +17,7 @@ They also serve as proof of concept, for the variety of things that can be built
- [Joplin](https://joplinapp.org) (**Native support**)
- [Notion](https://notion.so) (**Native support**)
- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
- [Obsidian](https://help.obsidian.md/How+to/Format+your+notes#Diagram) (**Native support**)
- [GitBook](https://gitbook.com)
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)

8
src/jison/transformer.cjs
View File

@@ -1,8 +0,0 @@
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { Generator } = require('jison');
module.exports = {
process(sourceText, sourcePath, options) {
return { code: new Generator(sourceText, options.transformerConfig).generate() };
},
};

1
src/mermaid.ts
View File

@@ -1,4 +1,3 @@
'use strict';
/**
* Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
* functionality and to render the diagrams to svg code.

7
src/themes/erDiagram-oldHardcodedValues.ts Normal file
View File

@@ -0,0 +1,7 @@
/**
* @file Values that have been hardcoded in src/diagrams/er/styles.js. These can be used by
* theme-_._ files to maintain display styles until themes, styles, renderers are revised. --
* 2022-09-22
*/
export const oldAttributeBackgroundColorOdd = '#ffffff';
export const oldAttributeBackgroundColorEven = '#f2f2f2';

14
src/themes/theme-base.js
View File

@@ -1,5 +1,10 @@
import { darken, lighten, adjust, invert } from 'khroma';
import { mkBorder } from './theme-helpers';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
} from './erDiagram-oldHardcodedValues';
class Theme {
constructor() {
/** # Base variables */
@@ -219,6 +224,15 @@ class Theme {
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
/* -------------------------------------------------- */
/* EntityRelationship diagrams */
this.attributeBackgroundColorOdd =
this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
/* -------------------------------------------------- */
}
calculate(overrides) {
if (typeof overrides !== 'object') {

12
src/themes/theme-dark.js
View File

@@ -1,5 +1,6 @@
import { invert, lighten, darken, rgba, adjust } from 'khroma';
import { mkBorder } from './theme-helpers';
class Theme {
constructor() {
this.background = '#333';
@@ -28,8 +29,8 @@ class Theme {
this.fontSize = '16px';
this.labelBackground = '#181818';
this.textColor = '#ccc';
/* Flowchart variables */
/* Flowchart variables */
this.nodeBkg = 'calculated';
this.nodeBorder = 'calculated';
this.clusterBkg = 'calculated';
@@ -218,6 +219,15 @@ class Theme {
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
/* -------------------------------------------------- */
/* EntityRelationship diagrams */
this.attributeBackgroundColorOdd =
this.attributeBackgroundColorOdd || lighten(this.background, 12);
this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || lighten(this.background, 2);
/* -------------------------------------------------- */
}
calculate(overrides) {
if (typeof overrides !== 'object') {

13
src/themes/theme-default.js
View File

@@ -1,5 +1,9 @@
import { invert, lighten, rgba, adjust, darken } from 'khroma';
import { mkBorder } from './theme-helpers';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
} from './erDiagram-oldHardcodedValues';
class Theme {
constructor() {
@@ -257,6 +261,15 @@ class Theme {
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
/* -------------------------------------------------- */
/* EntityRelationship diagrams */
this.attributeBackgroundColorOdd =
this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
/* -------------------------------------------------- */
}
calculate(overrides) {
if (typeof overrides !== 'object') {

14
src/themes/theme-forest.js
View File

@@ -1,5 +1,10 @@
import { darken, lighten, adjust, invert } from 'khroma';
import { mkBorder } from './theme-helpers';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
} from './erDiagram-oldHardcodedValues';
class Theme {
constructor() {
/* Base vales */
@@ -219,6 +224,15 @@ class Theme {
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
/* -------------------------------------------------- */
/* EntityRelationship diagrams */
this.attributeBackgroundColorOdd =
this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
/* -------------------------------------------------- */
}
calculate(overrides) {
if (typeof overrides !== 'object') {

13
src/themes/theme-neutral.js
View File

@@ -1,5 +1,9 @@
import { invert, darken, lighten, adjust } from 'khroma';
import { mkBorder } from './theme-helpers';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
} from './erDiagram-oldHardcodedValues';
// const Color = require ( 'khroma/dist/color' ).default
// Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
@@ -261,6 +265,15 @@ class Theme {
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
/* -------------------------------------------------- */
/* EntityRelationship diagrams */
this.attributeBackgroundColorOdd =
this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
/* -------------------------------------------------- */
}
calculate(overrides) {
if (typeof overrides !== 'object') {

38
vite.config.cts
View File

@@ -1,38 +0,0 @@
import { Generator } from 'jison';
import { defineConfig } from 'vitest/config';
const fileRegex = /\.jison$/;
/** Transforms jison to js. */
export function jisonPlugin() {
return {
name: 'transform-jison',
transform(src: string, id: string) {
if (fileRegex.test(id)) {
// eslint-disable-next-line no-console
console.log('Transforming', id);
return {
// @ts-ignore no typings for jison
code: new Generator(src, { 'token-stack': true }).generate(),
map: null, // provide source map if available
};
}
},
};
}
export default defineConfig({
resolve: {
extensions: ['.jison', '.js', '.ts', '.json'],
},
plugins: [jisonPlugin()],
test: {
environment: 'jsdom',
globals: true,
setupFiles: ['src/tests/setup.ts'],
coverage: {
reporter: ['text', 'json', 'html', 'lcov'],
},
},
});

17
vite.config.ts Normal file
View File

@@ -0,0 +1,17 @@
import jison from './.vite/jisonPlugin';
import { defineConfig } from 'vitest/config';
export default defineConfig({
resolve: {
extensions: ['.jison', '.js', '.ts', '.json'],
},
plugins: [jison()],
test: {
environment: 'jsdom',
globals: true,
setupFiles: ['src/tests/setup.ts'],
coverage: {
reporter: ['text', 'json', 'html', 'lcov'],
},
},
});

3007
yarn.lock
View File

File diff suppressed because it is too large Load Diff