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

Lint Fixes

Browse Source
This commit is contained in:
ashishj 2023-01-25 17:49:35 +01:00
parent df1e9c4117
commit 49ce5222c9
18 changed files with 188 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
cypress/platform/ashish2.html
View File

@ -71,6 +71,20 @@
I am a big big big tasks
I am not so big tasks
</pre>
<pre id="diagram" class="mermaid">
timeline
title MermaidChart 2023 Timeline
section 2023 Q1 &lt;br&gt; Release Personal Tier
Buttet 1 : sub-point 1a : sub-point 1b
: sub-point 1c
Bullet 2 : sub-point 2a : sub-point 2b
section 2023 Q2 <br> Release XYZ Tier
Buttet 3 : sub-point <br/> 3a : sub-point 3b
: sub-point 3c
Bullet 4 : sub-point 4a : sub-point 4b
</pre>
<pre id="diagram" class="mermaid2">
timeline
title England's History Timeline
@ -96,7 +110,7 @@
2008s : Instagram
2010 : Pinterest
</pre>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'themeVariables': {
'cScale0': '#ff0000',
'cScale1': '#00ff00',
@ -113,7 +127,7 @@
2010 : Pinterest
</pre>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'cScale0': '#ff0000',
'cScale1': '#00ff00',
@ -173,11 +187,11 @@ mindmap
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
<script type="module">
import mindmap from '../../packages/mermaid-mindmap/src/detector';
//import mindmap from '../../packages/mermaid-mindmap/src/detector';
// import example from '../../packages/mermaid-example-diagram/src/detector';
import timeline from '../../packages/mermaid-timeline/src/detector';
import mermaid from '../../packages/mermaid/src/mermaid';
await mermaid.registerExternalDiagrams([mindmap, timeline]);
await mermaid.registerExternalDiagrams([timeline]);
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -187,7 +201,7 @@ mindmap
logLevel: 0,
flowchart: {
useMaxWidth: false,
htmlLabels: true,
htmlLabels: false,
},
gantt: {
useMaxWidth: false,
@ -195,7 +209,7 @@ mindmap
timeline: {
disableMulticolor: false,
},
useMaxWidth: false,
useMaxWidth: true,
lazyLoadedDiagrams: [
// './mermaid-mindmap-detector.esm.mjs',
// './mermaid-example-diagram-detector.esm.mjs',

3
packages/mermaid-example-diagram/src/mermaidUtils.ts
View File

@ -42,7 +42,7 @@ export let setupGraphViewbox: (
* @param _getConfig - getConfig from mermaid/src/diagramAPI.ts
* @param _sanitizeText - sanitizeText from mermaid/src/diagramAPI.ts
* @param _setupGraphViewbox - setupGraphViewbox from mermaid/src/diagramAPI.ts
* @param _commonDb
* @param _commonDb -`commonDb` from mermaid/src/diagramAPI.ts
*/
export const injectUtils = (
_log: Record<keyof typeof LEVELS, typeof console.log>,
@ -64,5 +64,4 @@ export const injectUtils = (
sanitizeText = _sanitizeText;
setupGraphViewbox = _setupGraphViewbox;
commonDb = _commonDb;
};

6
packages/mermaid-mindmap/src/mindmapRenderer.js
View File

@ -11,7 +11,7 @@ cytoscape.use(coseBilkent);
/**
* @param {any} svg The svg element to draw the diagram onto
* @param {object} mindmap The maindmap data and hierarchy
* @param {object} mindmap The mindmap data and hierarchy
* @param section
* @param {object} conf The configuration object
*/
@ -110,7 +110,7 @@ function layoutMindmap(node, conf) {
renderEl.remove();
addNodes(node, cy, conf, 0);
// Make cytoscape care about the dimensisions of the nodes
// Make cytoscape care about the dimensions of the nodes
cy.nodes().forEach(function (n) {
n.layoutDimensions = () => {
const data = n.data();
@ -173,7 +173,7 @@ export const draw = async (text, id, version, diagObj) => {
log.debug('Renering info diagram\n' + text);
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);

5
packages/mermaid-timeline/src/mermaidUtils.ts
View File

@ -26,7 +26,7 @@ export let sanitizeText: (str: string) => string;
export const getCommonDb = () => localCommonDb;
export let parseDirective = (p: any, statement: string, context: string, type: string) => {
return;
}
};
/**
* Placeholder for the real function that will be injected by mermaid.
*/
@ -38,8 +38,6 @@ export let setupGraphViewbox: (
useMaxWidth: boolean
) => void;
/**
* Function called by mermaid that injects utility functions that help the diagram to be a good citizen.
* @param _log - The log function to use
@ -71,5 +69,4 @@ export const injectUtils = (
setupGraphViewbox = _setupGraphViewbox;
localCommonDb = _commonDb;
parseDirective = _parseDirective;
};

20
packages/mermaid-timeline/src/svgDraw.js
View File

@ -12,7 +12,7 @@ export const drawRect = function (elem, rectData) {
rectElem.attr('rx', rectData.rx);
rectElem.attr('ry', rectData.ry);
if (typeof rectData.class !== 'undefined') {
if (rectData.class !== undefined) {
rectElem.attr('class', rectData.class);
}
@ -117,11 +117,11 @@ export const drawCircle = function (element, circleData) {
circleElement.attr('stroke', circleData.stroke);
circleElement.attr('r', circleData.r);
if (typeof circleElement.class !== 'undefined') {
if (circleElement.class !== undefined) {
circleElement.attr('class', circleElement.class);
}
if (typeof circleData.title !== 'undefined') {
if (circleData.title !== undefined) {
circleElement.append('title').text(circleData.title);
}
@ -139,7 +139,7 @@ export const drawText = function (elem, textData) {
textElem.style('text-anchor', textData.anchor);
if (typeof textData.class !== 'undefined') {
if (textData.class !== undefined) {
textElem.attr('class', textData.class);
}
@ -517,9 +517,7 @@ export const drawNode = function (elem, node, fullSection, conf) {
node.section = section;
nodeElem.attr(
'class',
(node.class ? node.class + ' ' : '') +
'timeline-node ' +
('section-' + section)
(node.class ? node.class + ' ' : '') + 'timeline-node ' + ('section-' + section)
);
const bkgElem = nodeElem.append('g');
@ -535,7 +533,8 @@ export const drawNode = function (elem, node, fullSection, conf) {
.attr('text-anchor', 'middle')
.call(wrap, node.width);
const bbox = txt.node().getBBox();
const fontSize = conf.fontSize && conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
const fontSize =
conf.fontSize && conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding;
node.height = Math.max(node.height, node.maxHeight);
node.width = node.width + 2 * node.padding;
@ -545,7 +544,6 @@ export const drawNode = function (elem, node, fullSection, conf) {
// Create the background element
defaultBkg(bkgElem, node, section, conf);
return node;
};
@ -560,12 +558,12 @@ export const drawNode = function (elem, node, fullSection, conf) {
.attr('text-anchor', 'middle')
.call(wrap, node.width);
const bbox = txt.node().getBBox();
const fontSize = conf.fontSize && conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
const fontSize =
conf.fontSize && conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
textElem.remove();
return bbox.height + fontSize * 1.1 * 0.5 + node.padding;
};
const defaultBkg = function (elem, node, section) {
const rd = 5;
elem

11
packages/mermaid-timeline/src/timelineDb.js
View File

@ -1,4 +1,8 @@
import { getCommonDb as _getCommonDb, parseDirective as _parseDirective ,log } from './mermaidUtils';
import {
getCommonDb as _getCommonDb,
parseDirective as _parseDirective,
log,
} from './mermaidUtils';
let currentSection = '';
let currentTaskId = 0;
@ -45,7 +49,6 @@ export const getTasks = function () {
};
export const addTask = function (period, length, event) {
const rawTask = {
id: currentTaskId++,
section: currentSection,
@ -65,7 +68,6 @@ export const addEvent = function (event) {
currentTask.events.push(event);
};
export const addTaskOrg = function (descr) {
const newTask = {
section: currentSection,
@ -100,6 +102,5 @@ export default {
addTask,
addTaskOrg,
addEvent,
parseDirective
parseDirective,
};

105
packages/mermaid-timeline/src/timelineRenderer.ts
View File

@ -86,7 +86,6 @@ export const draw = function (text, id, version, diagObj) {
//calculate max task height
// for loop till tasks.length
for (const [i, task] of tasks.entries()) {
const taskNode = {
number: i,
descr: task,
@ -116,16 +115,13 @@ export const draw = function (text, id, version, diagObj) {
maxEventLineLengthTemp += svgDraw.getVirtualNodeHeight(svg, eventNode, conf);
}
maxEventLineLength = Math.max(maxEventLineLength, maxEventLineLengthTemp);
}
log.debug('maxSectionHeight before draw', maxSectionHeight);
log.debug('maxTaskHeight before draw', maxTaskHeight);
if (sections && sections.length > 0) {
sections.forEach((section) => {
const sectionNode = {
number: sectionNumber,
descr: section,
@ -139,22 +135,27 @@ export const draw = function (text, id, version, diagObj) {
const node = svgDraw.drawNode(sectionNodeWrapper, sectionNode, sectionNumber, conf);
log.debug('sectionNode output', node);
sectionNodeWrapper.attr(
'transform',
`translate(${masterX}, ${sectionBeginY})`
);
sectionNodeWrapper.attr('transform', `translate(${masterX}, ${sectionBeginY})`);
masterY += maxSectionHeight + 50;
//draw tasks for this section
//filter task where tasks.section == section
const tasksForSection = tasks.filter((task) => task.section === section);
if (tasksForSection.length > 0) {
drawTasks(svg, tasksForSection, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,maxEventLineLength,maxSectionHeight,false);
drawTasks(
svg,
tasksForSection,
sectionNumber,
masterX,
masterY,
maxTaskHeight,
conf,
maxEventCount,
maxEventLineLength,
maxSectionHeight,
false
);
}
// todo replace with total width of section and its tasks
masterX += 200 * Math.max(tasksForSection.length, 1);
@ -165,7 +166,19 @@ export const draw = function (text, id, version, diagObj) {
} else {
//draw tasks
hasSections = false;
drawTasks(svg, tasks, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,maxEventLineLength,maxSectionHeight,true);
drawTasks(
svg,
tasks,
sectionNumber,
masterX,
masterY,
maxTaskHeight,
conf,
maxEventCount,
maxEventLineLength,
maxSectionHeight,
true
);
}
// Get BBox of the diagram
@ -176,7 +189,7 @@ export const draw = function (text, id, version, diagObj) {
svg
.append('text')
.text(title)
.attr('x', (box.width/2)-LEFT_MARGIN)
.attr('x', box.width / 2 - LEFT_MARGIN)
.attr('font-size', '4ex')
.attr('font-weight', 'bold')
.attr('y', 20);
@ -190,20 +203,36 @@ export const draw = function (text, id, version, diagObj) {
.append('line')
.attr('x1', LEFT_MARGIN)
.attr('y1', depthY) // One section head + one task + margins
.attr('x2', (box.width)+3*LEFT_MARGIN) // Subtract stroke width so arrow point is retained
.attr('x2', box.width + 3 * LEFT_MARGIN) // Subtract stroke width so arrow point is retained
.attr('y2', depthY)
.attr('stroke-width', 4)
.attr('stroke', 'black')
.attr('marker-end', 'url(#arrowhead)');
// Setup the view box and size of the svg element
setupGraphViewbox(undefined, svg, conf.timeline.padding?conf.timeline.padding:50, conf.timeline.useMaxWidth?conf.timeline.useMaxWidth:false);
setupGraphViewbox(
undefined,
svg,
conf.timeline.padding ? conf.timeline.padding : 50,
conf.timeline.useMaxWidth ? conf.timeline.useMaxWidth : false
);
// addSVGAccessibilityFields(diagObj.db, diagram, id);
};
export const drawTasks = function (diagram, tasks, sectionColor, masterX, masterY, maxTaskHeight,conf,maxEventCount,maxEventLineLength,maxSectionHeight, isWithoutSections) {
export const drawTasks = function (
diagram,
tasks,
sectionColor,
masterX,
masterY,
maxTaskHeight,
conf,
maxEventCount,
maxEventLineLength,
maxSectionHeight,
isWithoutSections
) {
// Draw the tasks
for (const task of tasks) {
// create node from task
@ -223,16 +252,11 @@ export const drawTasks = function (diagram, tasks, sectionColor, masterX, master
const taskHeight = node.height;
//log task height
log.debug('taskHeight after draw', taskHeight);
taskWrapper.attr(
'transform',
`translate(${masterX}, ${masterY})`
);
taskWrapper.attr('transform', `translate(${masterX}, ${masterY})`);
// update max task height
maxTaskHeight = Math.max(maxTaskHeight, taskHeight);
// if task has events, draw them
if (task.events) {
// draw a line between the task and the events
@ -240,7 +264,8 @@ export const drawTasks = function (diagram, tasks, sectionColor, masterX, master
let linelength = maxTaskHeight;
//add margin to task
masterY += 100;
linelength = linelength+ drawEvents(diagram, task.events, sectionColor, masterX, masterY, conf);
linelength =
linelength + drawEvents(diagram, task.events, sectionColor, masterX, masterY, conf);
masterY -= 100;
lineWrapper
@ -248,31 +273,34 @@ export const drawTasks = function (diagram, tasks, sectionColor, masterX, master
.attr('x1', masterX + 190 / 2)
.attr('y1', masterY + maxTaskHeight) // One section head + one task + margins
.attr('x2', masterX + 190 / 2) // Subtract stroke width so arrow point is retained
.attr('y2', masterY + maxTaskHeight + (isWithoutSections?maxTaskHeight:maxSectionHeight) + maxEventLineLength+ 120)
.attr(
'y2',
masterY +
maxTaskHeight +
(isWithoutSections ? maxTaskHeight : maxSectionHeight) +
maxEventLineLength +
120
)
.attr('stroke-width', 2)
.attr('stroke', 'black')
.attr('marker-end', 'url(#arrowhead)')
.attr('stroke-dasharray', "5,5");
.attr('stroke-dasharray', '5,5');
}
masterX = masterX + 200;
if (isWithoutSections && !getConfig().timeline.disableMulticolor) {
sectionColor++;
}
}
// reset Y coordinate for next section
masterY= masterY -10; ;
masterY = masterY - 10;
};
export const drawEvents = function (diagram, events, sectionColor, masterX, masterY, conf) {
let maxEventHeight = 0;
const eventBeginY = masterY;
masterY = masterY + 100
masterY = masterY + 100;
// Draw the events
for (const event of events) {
// create node from event
@ -289,20 +317,15 @@ export const drawEvents = function (diagram, events, sectionColor, masterX, mast
log.debug('eventNode', eventNode);
// create event wrapper
const eventWrapper = diagram.append('g').attr('class', 'eventWrapper');
const node = svgDraw.drawNode(eventWrapper, eventNode, sectionColor, conf)
const node = svgDraw.drawNode(eventWrapper, eventNode, sectionColor, conf);
const eventHeight = node.height;
maxEventHeight = maxEventHeight + eventHeight;
eventWrapper.attr(
'transform',
`translate(${masterX}, ${masterY})`
);
eventWrapper.attr('transform', `translate(${masterX}, ${masterY})`);
masterY = masterY + 10 + eventHeight;
}
// set masterY back to eventBeginY
masterY = eventBeginY;
return maxEventHeight;
};
export default {

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

@ -985,8 +985,6 @@ const config: Partial<MermaidConfig> = {
*/
useMaxWidth: true,
/**
* | Parameter | Description | Type | Required | Values |
* | ----------- | --------------------------------- | ---- | -------- | ----------- |

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

@ -8,7 +8,6 @@ import { DiagramDefinition, DiagramDetector } from './types';
import * as _commonDb from '../commonDb';
import { parseDirective as _parseDirective } from '../directiveUtils';
/*
Packaging and exposing resources for external diagrams so that they can import
diagramAPI and have access to select parts of mermaid common code required to
@ -19,8 +18,11 @@ export const setLogLevel = _setLogLevel;
export const getConfig = _getConfig;
export const sanitizeText = (text: string) => _sanitizeText(text, getConfig());
export const setupGraphViewbox = _setupGraphViewbox;
export const getCommonDb = () => { return _commonDb };
export const parseDirective = (p: any, statement: string, context: string, type: string)=>_parseDirective(p, statement, context, type);
export const getCommonDb = () => {
return _commonDb;
};
export const parseDirective = (p: any, statement: string, context: string, type: string) =>
_parseDirective(p, statement, context, type);
const diagrams: Record<string, DiagramDefinition> = {};
export interface Detectors {
@ -51,7 +53,15 @@ export const registerDiagram = (
addStylesForDiagram(id, diagram.styles);
if (diagram.injectUtils) {
diagram.injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox,getCommonDb(),parseDirective);
diagram.injectUtils(
log,
setLogLevel,
getConfig,
sanitizeText,
setupGraphViewbox,
getCommonDb(),
parseDirective
);
}
};

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

@ -33,7 +33,7 @@ export interface DiagramDefinition {
_sanitizeText: InjectUtils['_sanitizeText'],
_setupGraphViewbox: InjectUtils['_setupGraphViewbox'],
_commonDb: InjectUtils['_commonDb'],
_parseDirective: InjectUtils['_parseDirective'],
_parseDirective: InjectUtils['_parseDirective']
) => void;
}

9
packages/mermaid/src/directiveUtils.ts
View File

@ -1,5 +1,3 @@
import * as configApi from './config';
import { log } from './logger';
@ -7,7 +5,12 @@ import { directiveSanitizer } from './utils';
let currentDirective: { type?: string; args?: any } | undefined = {};
export const parseDirective = function (p: any, statement: string, context: string, type: string): void {
export const parseDirective = function (
p: any,
statement: string,
context: string,
type: string
): void {
log.debug('parseDirective is being called', statement, context, type);
try {
if (statement !== undefined) {

20
packages/mermaid/src/docs/syntax/timeline.md
View File

@ -15,7 +15,6 @@ timeline
2006 : Twitter
```
## Syntax
The syntax for creating Timeline diagram is simple. You always start with the `timeline` keyword to let mermaid know that you want to create a timeline diagram.
@ -24,15 +23,18 @@ After that there is a possibility to add a title to the timeline. This is done b
Then you add the timeline data, where you always start with a time period, followed by a colon and then the text for the event. Optionally you can add a second colon and then the text for the event. So, you can have one or more events per time period.
```json
{time period} : {event}
```
or
```json
{time period} : {event} : {event}
```
or
```json
{time period} : {event}
: {event}
@ -41,7 +43,6 @@ or
NOTE: Both time period and event are simple text, and not limited to numbers.
Let us look at the syntax for the example above.
```mermaid-example
@ -59,6 +60,7 @@ The sequence of time period and events is important, as it will be used to draw
Similarly, the first event will be placed at the top for that specific time period, and the last event will be placed at the bottom.
## Grouping of time periods in sections/ages
You can group time periods in sections/ages. This is done by adding a line with the keyword `section` followed by the section name.
All subsequent time periods will be placed in this section until a new section is defined.
@ -78,12 +80,13 @@ timeline
Industry 4.0 : Internet, Robotics, Internet of Things
Industry 5.0 : Artificial intelligence, Big data,3D printing
```
As you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined.
All time periods and events under a given section follow a similar color scheme. This is done to make it easier to see the relationship between time periods and events.
## Wrapping of text for long time-periods or events
By default, the text for time-periods and events will be wrapped if it is too long. This is done to avoid that the text is drawn outside the diagram.
You can also use `<br>` to force a line break.
@ -120,6 +123,7 @@ However, if there is no section defined, then we have two possibilities:
2006 : Twitter
```
Note that this is no, section defined, and each time period and its corresponding events will have its own color scheme.
2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
@ -139,6 +143,7 @@ mermaid.initialize({
```
let us look at same example, where we have disabled the multiColor option.
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
timeline
@ -149,6 +154,7 @@ let us look at same example, where we have disabled the multiColor option.
2006 : Twitter
```
### Customizing Color scheme
You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
@ -180,8 +186,8 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
See how the colors are changed to the values specified in the theme variables.
## Themes
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).
The following are the different pre-defined theme options:
@ -270,10 +276,6 @@ Let's put them to use, and see how our sample diagram looks in different themes:
2010 : Pinterest
```
## Integrating with your library/website.
Timeline uses the experimental lazy loading & async rendering features which could change in the future.

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

@ -779,7 +779,6 @@ const renderAsync = async function (
return svgCode;
};
/**
* @param options - Initial Mermaid options
*/