marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-24 14:44:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

getting there

Browse Source
This commit is contained in:
Ashish Jain
2022-02-10 20:32:21 +01:00
parent 3f6296b619
commit bb2dd2f5f3
381 changed files with 150220 additions and 72934 deletions
Download Patch File Download Diff File Expand all files Collapse all files

373
src/mermaidAPI.js
View File

@@ -1,77 +1,82 @@
/**
* This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
* Edit this
* Page[[N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js)
*
* This is the API to be used when optionally handling the integration with the web page, instead of
* using the default integration provided by mermaid.js.
*
* The core of this api is the [**render**](Setup.md?id=render) function which, given a graph
* definition as text, renders the graph/diagram and returns an svg element for the graph.
*
* It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different.
* It is is then up to the user of the API to make use of the svg, either insert it somewhere in the
* page or do something completely different.
*
* In addition to the render function, a number of behavioral configuration options are available.
*
* @name mermaidAPI
*/
import Stylis from 'stylis';
import { select } from 'd3';
import { compile, serialize, stringify } from 'stylis';
import pkg from '../package.json';
// import * as configApi from './config';
// // , {
// // setConfig,
// // configApi.getConfig,
// // configApi.updateSiteConfig,
// // configApi.setSiteConfig,
// // configApi.getSiteConfig,
// // configApi.defaultConfig
// // }
import { logger, setLogLevel } from './logger';
import utils, { assignWithDepth } from './utils';
import flowRenderer from './diagrams/flowchart/flowRenderer';
import flowRendererV2 from './diagrams/flowchart/flowRenderer-v2';
import flowParser from './diagrams/flowchart/parser/flow';
import flowDb from './diagrams/flowchart/flowDb';
import sequenceRenderer from './diagrams/sequence/sequenceRenderer';
import sequenceParser from './diagrams/sequence/parser/sequenceDiagram';
import sequenceDb from './diagrams/sequence/sequenceDb';
import ganttRenderer from './diagrams/gantt/ganttRenderer';
import ganttParser from './diagrams/gantt/parser/gantt';
import ganttDb from './diagrams/gantt/ganttDb';
import * as configApi from './config';
import classDb from './diagrams/class/classDb';
import classRenderer from './diagrams/class/classRenderer';
import classRendererV2 from './diagrams/class/classRenderer-v2';
import classParser from './diagrams/class/parser/classDiagram';
import classDb from './diagrams/class/classDb';
import stateRenderer from './diagrams/state/stateRenderer';
import stateRendererV2 from './diagrams/state/stateRenderer-v2';
import stateParser from './diagrams/state/parser/stateDiagram';
import stateDb from './diagrams/state/stateDb';
import erDb from './diagrams/er/erDb';
import erRenderer from './diagrams/er/erRenderer';
import erParser from './diagrams/er/parser/erDiagram';
import flowDb from './diagrams/flowchart/flowDb';
import flowRenderer from './diagrams/flowchart/flowRenderer';
import flowRendererV2 from './diagrams/flowchart/flowRenderer-v2';
import flowParser from './diagrams/flowchart/parser/flow';
import ganttDb from './diagrams/gantt/ganttDb';
import ganttRenderer from './diagrams/gantt/ganttRenderer';
import ganttParser from './diagrams/gantt/parser/gantt';
import gitGraphAst from './diagrams/git/gitGraphAst';
import gitGraphRenderer from './diagrams/git/gitGraphRenderer';
import gitGraphParser from './diagrams/git/parser/gitGraph';
import gitGraphAst from './diagrams/git/gitGraphAst';
import infoRenderer from './diagrams/info/infoRenderer';
import errorRenderer from './errorRenderer';
import infoParser from './diagrams/info/parser/info';
import infoDb from './diagrams/info/infoDb';
import pieRenderer from './diagrams/pie/pieRenderer';
import infoRenderer from './diagrams/info/infoRenderer';
import infoParser from './diagrams/info/parser/info';
import pieParser from './diagrams/pie/parser/pie';
import pieDb from './diagrams/pie/pieDb';
import erDb from './diagrams/er/erDb';
import erParser from './diagrams/er/parser/erDiagram';
import erRenderer from './diagrams/er/erRenderer';
import journeyParser from './diagrams/user-journey/parser/journey';
import pieRenderer from './diagrams/pie/pieRenderer';
import requirementParser from './diagrams/requirement/parser/requirementDiagram';
import requirementDb from './diagrams/requirement/requirementDb';
import requirementRenderer from './diagrams/requirement/requirementRenderer';
import sequenceParser from './diagrams/sequence/parser/sequenceDiagram';
import sequenceDb from './diagrams/sequence/sequenceDb';
import sequenceRenderer from './diagrams/sequence/sequenceRenderer';
import stateParser from './diagrams/state/parser/stateDiagram';
import stateDb from './diagrams/state/stateDb';
import stateRenderer from './diagrams/state/stateRenderer';
import stateRendererV2 from './diagrams/state/stateRenderer-v2';
import journeyDb from './diagrams/user-journey/journeyDb';
import journeyRenderer from './diagrams/user-journey/journeyRenderer';
import * as configApi from './config';
import journeyParser from './diagrams/user-journey/parser/journey';
import errorRenderer from './errorRenderer';
import { attachFunctions } from './interactionDb';
import { log, setLogLevel } from './logger';
import getStyles from './styles';
import theme from './themes';
import utils, { directiveSanitizer, assignWithDepth, sanitizeCss } from './utils';
/**
* @param text
* @returns {any}
*/
function parse(text) {
const graphInit = utils.detectInit(text);
const cnf = configApi.getConfig();
const graphInit = utils.detectInit(text, cnf);
if (graphInit) {
reinitialize(graphInit);
logger.debug('reinit ', graphInit);
log.debug('reinit ', graphInit);
}
const graphType = utils.detectType(text);
const graphType = utils.detectType(text, cnf);
let parser;
logger.debug('Type ' + graphType);
log.debug('Type ' + graphType);
switch (graphType) {
case 'git':
parser = gitGraphParser;
@@ -112,25 +117,31 @@ function parse(text) {
parser.parser.yy = stateDb;
break;
case 'info':
logger.debug('info info info');
log.debug('info info info');
parser = infoParser;
parser.parser.yy = infoDb;
break;
case 'pie':
logger.debug('pie');
log.debug('pie');
parser = pieParser;
parser.parser.yy = pieDb;
break;
case 'er':
logger.debug('er');
log.debug('er');
parser = erParser;
parser.parser.yy = erDb;
break;
case 'journey':
logger.debug('Journey');
log.debug('Journey');
parser = journeyParser;
parser.parser.yy = journeyDb;
break;
case 'requirement':
case 'requirementDiagram':
log.debug('RequirementDiagram');
parser = requirementParser;
parser.parser.yy = requirementDb;
break;
}
parser.parser.yy.graphType = graphType;
parser.parser.yy.parseError = (str, hash) => {
@@ -142,19 +153,19 @@ function parse(text) {
return parser;
}
export const encodeEntities = function(text) {
export const encodeEntities = function (text) {
let txt = text;
txt = txt.replace(/style.*:\S*#.*;/g, function(s) {
txt = txt.replace(/style.*:\S*#.*;/g, function (s) {
const innerTxt = s.substring(0, s.length - 1);
return innerTxt;
});
txt = txt.replace(/classDef.*:\S*#.*;/g, function(s) {
txt = txt.replace(/classDef.*:\S*#.*;/g, function (s) {
const innerTxt = s.substring(0, s.length - 1);
return innerTxt;
});
txt = txt.replace(/#\w+;/g, function(s) {
txt = txt.replace(/#\w+;/g, function (s) {
const innerTxt = s.substring(1, s.length - 1);
const isInt = /^\+?\d+$/.test(innerTxt);
@@ -168,16 +179,16 @@ export const encodeEntities = function(text) {
return txt;
};
export const decodeEntities = function(text) {
export const decodeEntities = function (text) {
let txt = text;
txt = txt.replace(/fl°°/g, function() {
txt = txt.replace(/fl°°/g, function () {
return '&#';
});
txt = txt.replace(/fl°/g, function() {
txt = txt.replace(/fl°/g, function () {
return '&';
});
txt = txt.replace(/¶ß/g, function() {
txt = txt.replace(/¶ß/g, function () {
return ';';
});
@@ -186,46 +197,36 @@ export const decodeEntities = function(text) {
/**
* Function that renders an svg with a graph from a chart definition. Usage example below.
*
* ```js
* ```javascript
* mermaidAPI.initialize({
* startOnLoad:true
* });
* $(function(){
* const graphDefinition = 'graph TB\na-->b';
* const cb = function(svgGraph){
* console.log(svgGraph);
* };
* mermaidAPI.render('id1',graphDefinition,cb);
* });
*```
* @param id the id of the element to be rendered
* @param _txt the graph definition
* @param cb callback which is called after rendering is finished with the svg code as inparam.
* @param container selector to element in which a div with the graph temporarily will be inserted. In one is
* provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
* completed.
* startOnLoad: true,
* });
* $(function () {
* const graphDefinition = 'graph TB\na-->b';
* const cb = function (svgGraph) {
* console.log(svgGraph);
* };
* mermaidAPI.render('id1', graphDefinition, cb);
* });
* ```
*
* @param {any} id The id of the element to be rendered
* @param {any} _txt The graph definition
* @param {any} cb Callback which is called after rendering is finished with the svg code as inparam.
* @param {any} container Selector to element in which a div with the graph temporarily will be
* inserted. In one is provided a hidden div will be inserted in the body of the page instead. The
* element will be removed when rendering is completed.
* @returns {any}
*/
const render = function(id, _txt, cb, container) {
const render = function (id, _txt, cb, container) {
configApi.reset();
let txt = _txt;
const graphInit = utils.detectInit(txt);
if (graphInit) {
directiveSanitizer(graphInit);
configApi.addDirective(graphInit);
}
// else {
// configApi.reset();
// const siteConfig = configApi.getSiteConfig();
// configApi.addDirective(siteConfig);
// }
// console.warn('Render fetching config');
const cnf = configApi.getConfig();
// console.warn('Render with config after adding new directives', cnf.sequence);
// console.warn(
// 'Render with config after adding new directives',
// cnf.fontFamily,
// cnf.themeVariables.fontFamily
// );
let cnf = configApi.getConfig();
// Check the maximum allowed text size
if (_txt.length > cnf.maxTextSize) {
txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
@@ -267,7 +268,7 @@ const render = function(id, _txt, cb, container) {
txt = encodeEntities(txt);
const element = select('#d' + id).node();
const graphType = utils.detectType(txt);
const graphType = utils.detectType(txt, cnf);
// insert inline style into svg
const svg = element.firstChild;
@@ -290,25 +291,47 @@ const render = function(id, _txt, cb, container) {
// classDef
if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
const classes = flowRenderer.getClasses(txt);
const htmlLabels = cnf.htmlLabels || cnf.flowchart.htmlLabels;
for (const className in classes) {
userStyles += `\n.${className} > * { ${classes[className].styles.join(
' !important; '
)} !important; }`;
if (classes[className].textStyles) {
userStyles += `\n.${className} tspan { ${classes[className].textStyles.join(
if (htmlLabels) {
userStyles += `\n.${className} > * { ${classes[className].styles.join(
' !important; '
)} !important; }`;
userStyles += `\n.${className} span { ${classes[className].styles.join(
' !important; '
)} !important; }`;
} else {
userStyles += `\n.${className} path { ${classes[className].styles.join(
' !important; '
)} !important; }`;
userStyles += `\n.${className} rect { ${classes[className].styles.join(
' !important; '
)} !important; }`;
userStyles += `\n.${className} polygon { ${classes[className].styles.join(
' !important; '
)} !important; }`;
userStyles += `\n.${className} ellipse { ${classes[className].styles.join(
' !important; '
)} !important; }`;
userStyles += `\n.${className} circle { ${classes[className].styles.join(
' !important; '
)} !important; }`;
if (classes[className].textStyles) {
userStyles += `\n.${className} tspan { ${classes[className].textStyles.join(
' !important; '
)} !important; }`;
}
}
}
}
// logger.warn(cnf.themeVariables);
// log.warn(cnf.themeVariables);
const stylis = new Stylis();
const stylis = (selector, styles) => serialize(compile(`${selector}{${styles}}`), stringify);
const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));
const style1 = document.createElement('style');
style1.innerHTML = rules;
style1.innerHTML = `#${id} ` + rules;
svg.insertBefore(style1, firstChild);
// Verify that the generated svgs are ok before removing this
@@ -327,6 +350,7 @@ const render = function(id, _txt, cb, container) {
switch (graphType) {
case 'git':
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
//gitGraphRenderer.setConf(cnf.git);
gitGraphRenderer.draw(txt, id, false);
break;
case 'flowchart':
@@ -383,8 +407,8 @@ const render = function(id, _txt, cb, container) {
infoRenderer.draw(txt, id, pkg.version);
break;
case 'pie':
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
pieRenderer.setConf(cnf.pie);
//cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
//pieRenderer.setConf(cnf.pie);
pieRenderer.draw(txt, id, pkg.version);
break;
case 'er':
@@ -395,6 +419,10 @@ const render = function(id, _txt, cb, container) {
journeyRenderer.setConf(cnf.journey);
journeyRenderer.draw(txt, id, pkg.version);
break;
case 'requirement':
requirementRenderer.setConf(cnf.requirement);
requirementRenderer.draw(txt, id, pkg.version);
break;
}
} catch (e) {
// errorRenderer.setConf(cnf.class);
@@ -406,26 +434,18 @@ const render = function(id, _txt, cb, container) {
.selectAll('foreignobject > *')
.attr('xmlns', 'http://www.w3.org/1999/xhtml');
// if (cnf.arrowMarkerAbsolute) {
// url =
// window.location.protocol +
// '//' +
// window.location.host +
// window.location.pathname +
// window.location.search;
// url = url.replace(/\(/g, '\\(');
// url = url.replace(/\)/g, '\\)');
// }
// Fix for when the base tag is used
let svgCode = select('#d' + id).node().innerHTML;
logger.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);
log.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);
if (!cnf.arrowMarkerAbsolute || cnf.arrowMarkerAbsolute === 'false') {
svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
}
svgCode = decodeEntities(svgCode);
// Fix for when the br tag is used
svgCode = svgCode.replace(/<br>/g, '<br/>');
if (typeof cb !== 'undefined') {
switch (graphType) {
case 'flowchart':
@@ -443,8 +463,9 @@ const render = function(id, _txt, cb, container) {
cb(svgCode);
}
} else {
logger.debug('CB = undefined!');
log.debug('CB = undefined!');
}
attachFunctions();
const node = select('#d' + id).node();
if (node !== null && typeof node.remove === 'function') {
@@ -458,7 +479,7 @@ const render = function(id, _txt, cb, container) {
let currentDirective = {};
const parseDirective = function(p, statement, context, type) {
const parseDirective = function (p, statement, context, type) {
try {
if (statement !== undefined) {
statement = statement.trim();
@@ -479,19 +500,19 @@ const parseDirective = function(p, statement, context, type) {
}
}
} catch (error) {
logger.error(
log.error(
`Error while rendering sequenceDiagram directive: ${statement} jison context: ${context}`
);
logger.error(error.message);
log.error(error.message);
}
};
const handleDirective = function(p, directive, type) {
logger.debug(`Directive type=${directive.type} with args:`, directive.args);
const handleDirective = function (p, directive, type) {
log.debug(`Directive type=${directive.type} with args:`, directive.args);
switch (directive.type) {
case 'init':
case 'initialize': {
['config'].forEach(prop => {
['config'].forEach((prop) => {
if (typeof directive.args[prop] !== 'undefined') {
if (type === 'flowchart-v2') {
type = 'flowchart';
@@ -500,7 +521,9 @@ const handleDirective = function(p, directive, type) {
delete directive.args[prop];
}
});
log.debug('sanitize in handleDirective', directive.args);
directiveSanitizer(directive.args);
log.debug('sanitize in handleDirective (done)', directive.args);
reinitialize(directive.args);
configApi.addDirective(directive.args);
break;
@@ -511,8 +534,11 @@ const handleDirective = function(p, directive, type) {
p.setWrap(directive.type === 'wrap');
}
break;
case 'themeCss':
log.warn('themeCss encountered');
break;
default:
logger.warn(
log.warn(
`Unhandled directive: source: '%%{${directive.type}: ${JSON.stringify(
directive.args ? directive.args : {}
)}}%%`,
@@ -522,7 +548,9 @@ const handleDirective = function(p, directive, type) {
}
};
/** @param {any} conf */
function updateRendererConfigs(conf) {
// Todo remove, all diagrams should get config on demoand from the config object, no need for this
// gitGraphRenderer.setConf(conf.git); // Todo Remove all of these
flowRenderer.setConf(conf.flowchart);
flowRendererV2.setConf(conf.flowchart);
@@ -535,9 +563,10 @@ function updateRendererConfigs(conf) {
stateRenderer.setConf(conf.state);
stateRendererV2.setConf(conf.state);
infoRenderer.setConf(conf.class);
pieRenderer.setConf(conf.class);
// pieRenderer.setConf(conf.class);
erRenderer.setConf(conf.er);
journeyRenderer.setConf(conf.journey);
requirementRenderer.setConf(conf.requirement);
errorRenderer.setConf(conf.class);
}
@@ -553,9 +582,10 @@ function reinitialize() {
// typeof options === 'object' ? configApi.setConfig(options) : configApi.getSiteConfig();
// updateRendererConfigs(config);
// setLogLevel(config.logLevel);
// logger.debug('mermaidAPI.reinitialize: ', config);
// log.debug('mermaidAPI.reinitialize: ', config);
}
/** @param {any} options */
function initialize(options) {
// console.warn(`mermaidAPI.initialize: v${pkg.version} `, options);
@@ -570,7 +600,7 @@ function initialize(options) {
}
}
// Set default options
configApi.setSiteConfigDelta(options);
configApi.saveConfigFromInitilize(options);
if (options && options.theme && theme[options.theme]) {
// Todo merge with user options
@@ -584,7 +614,7 @@ function initialize(options) {
updateRendererConfigs(config);
setLogLevel(config.logLevel);
// logger.debug('mermaidAPI.initialize: ', config);
// log.debug('mermaidAPI.initialize: ', config);
}
const mermaidAPI = Object.freeze({
@@ -607,7 +637,7 @@ const mermaidAPI = Object.freeze({
configApi.reset(configApi.defaultConfig);
updateRendererConfigs(configApi.getConfig());
},
defaultConfig: configApi.defaultConfig
defaultConfig: configApi.defaultConfig,
});
setLogLevel(configApi.getConfig().logLevel);
@@ -620,57 +650,58 @@ export default mermaidAPI;
* ```html
* <script>
* var config = {
* theme:'default',
* logLevel:'fatal',
* securityLevel:'strict',
* startOnLoad:true,
* arrowMarkerAbsolute:false,
* theme: 'default',
* logLevel: 'fatal',
* securityLevel: 'strict',
* startOnLoad: true,
* arrowMarkerAbsolute: false,
*
* er:{
* diagramPadding:20,
* layoutDirection:'TB',
* minEntityWidth:100,
* minEntityHeight:75,
* entityPadding:15,
* stroke:'gray',
* fill:'honeydew',
* fontSize:12,
* useMaxWidth:true,
* er: {
* diagramPadding: 20,
* layoutDirection: 'TB',
* minEntityWidth: 100,
* minEntityHeight: 75,
* entityPadding: 15,
* stroke: 'gray',
* fill: 'honeydew',
* fontSize: 12,
* useMaxWidth: true,
* },
* flowchart:{
* diagramPadding:8,
* htmlLabels:true,
* curve:'linear',
* flowchart: {
* diagramPadding: 8,
* htmlLabels: true,
* curve: 'basis',
* },
* sequence:{
* diagramMarginX:50,
* diagramMarginY:10,
* actorMargin:50,
* width:150,
* height:65,
* boxMargin:10,
* boxTextMargin:5,
* noteMargin:10,
* messageMargin:35,
* messageAlign:'center',
* mirrorActors:true,
* bottomMarginAdj:1,
* useMaxWidth:true,
* rightAngles:false,
* showSequenceNumbers:false,
* sequence: {
* diagramMarginX: 50,
* diagramMarginY: 10,
* actorMargin: 50,
* width: 150,
* height: 65,
* boxMargin: 10,
* boxTextMargin: 5,
* noteMargin: 10,
* messageMargin: 35,
* messageAlign: 'center',
* mirrorActors: true,
* bottomMarginAdj: 1,
* useMaxWidth: true,
* rightAngles: false,
* showSequenceNumbers: false,
* },
* gantt: {
* titleTopMargin: 25,
* barHeight: 20,
* barGap: 4,
* topPadding: 50,
* leftPadding: 75,
* gridLineStartPadding: 35,
* fontSize: 11,
* fontFamily: '"Open-Sans", "sans-serif"',
* numberSectionStyles: 4,
* axisFormat: '%Y-%m-%d',
* topAxis: false,
* },
* gantt:{
* titleTopMargin:25,
* barHeight:20,
* barGap:4,
* topPadding:50,
* leftPadding:75,
* gridLineStartPadding:35,
* fontSize:11,
* fontFamily:'"Open-Sans", "sans-serif"',
* numberSectionStyles:4,
* axisFormat:'%Y-%m-%d',
* }
* };
* mermaid.initialize(config);
* </script>