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

#5237 WIP

Browse Source
This commit is contained in:
Ashish Jain
2024-04-29 11:19:06 +02:00
parent b22ae106b2
commit 9f6fc5a074
5 changed files with 369 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
cypress/platform/knsv2.html
View File

@@ -78,16 +78,13 @@
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
stateDiagram-v2 stateDiagram-v2
state fork_state <<fork>> [*] --> First
[*] --> fork_state state First {
fork_state --> State2 [*] --> second
fork_state --> State3 second --> [*]
}
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">

54
packages/mermaid/src/diagrams/state/stateCommon.ts
View File

@@ -27,8 +27,36 @@ export const G_EDGE_LABELPOS = 'c';
export const G_EDGE_LABELTYPE = 'text'; export const G_EDGE_LABELTYPE = 'text';
export const G_EDGE_THICKNESS = 'normal'; export const G_EDGE_THICKNESS = 'normal';
export const CSS_EDGE = 'transition'; export const SHAPE_STATE = 'rect';
export const SHAPE_STATE_WITH_DESC = 'rectWithTitle';
export const SHAPE_START = 'stateStart';
export const SHAPE_END = 'stateEnd';
export const SHAPE_DIVIDER = 'divider';
export const SHAPE_GROUP = 'roundedWithTitle';
export const SHAPE_NOTE = 'note';
export const SHAPE_NOTEGROUP = 'noteGroup';
// CSS classes
export const CSS_DIAGRAM = 'statediagram'; export const CSS_DIAGRAM = 'statediagram';
export const CSS_STATE = 'state';
export const CSS_DIAGRAM_STATE = `${CSS_DIAGRAM}-${CSS_STATE}`;
export const CSS_EDGE = 'transition';
export const CSS_NOTE = 'note';
export const CSS_NOTE_EDGE = 'note-edge';
export const CSS_EDGE_NOTE_EDGE = `${CSS_EDGE} ${CSS_NOTE_EDGE}`;
export const CSS_DIAGRAM_NOTE = `${CSS_DIAGRAM}-${CSS_NOTE}`;
export const CSS_CLUSTER = 'cluster';
export const CSS_DIAGRAM_CLUSTER = `${CSS_DIAGRAM}-${CSS_CLUSTER}`;
export const CSS_CLUSTER_ALT = 'cluster-alt';
export const CSS_DIAGRAM_CLUSTER_ALT = `${CSS_DIAGRAM}-${CSS_CLUSTER_ALT}`;
export const PARENT = 'parent';
export const NOTE = 'note';
export const DOMID_STATE = 'state';
export const DOMID_TYPE_SPACER = '----';
export const NOTE_ID = `${DOMID_TYPE_SPACER}${NOTE}`;
export const PARENT_ID = `${DOMID_TYPE_SPACER}${PARENT}`;
// --------------------------------------
export default { export default {
DEFAULT_DIAGRAM_DIRECTION, DEFAULT_DIAGRAM_DIRECTION,
@@ -46,4 +74,28 @@ export default {
G_EDGE_THICKNESS, G_EDGE_THICKNESS,
CSS_EDGE, CSS_EDGE,
CSS_DIAGRAM, CSS_DIAGRAM,
SHAPE_STATE,
SHAPE_STATE_WITH_DESC,
SHAPE_START,
SHAPE_END,
SHAPE_DIVIDER,
SHAPE_GROUP,
SHAPE_NOTE,
SHAPE_NOTEGROUP,
CSS_STATE,
CSS_DIAGRAM_STATE,
CSS_NOTE,
CSS_NOTE_EDGE,
CSS_EDGE_NOTE_EDGE,
CSS_DIAGRAM_NOTE,
CSS_CLUSTER,
CSS_DIAGRAM_CLUSTER,
CSS_CLUSTER_ALT,
CSS_DIAGRAM_CLUSTER_ALT,
PARENT,
NOTE,
DOMID_STATE,
DOMID_TYPE_SPACER,
NOTE_ID,
PARENT_ID,
}; };

382
packages/mermaid/src/diagrams/state/stateDb.js
View File

@@ -26,8 +26,27 @@ import {
G_EDGE_LABELTYPE, G_EDGE_LABELTYPE,
G_EDGE_THICKNESS, G_EDGE_THICKNESS,
CSS_EDGE, CSS_EDGE,
DEFAULT_NESTED_DOC_DIR,
SHAPE_DIVIDER,
SHAPE_GROUP,
CSS_DIAGRAM_CLUSTER,
CSS_DIAGRAM_CLUSTER_ALT,
CSS_DIAGRAM_STATE,
SHAPE_STATE_WITH_DESC,
SHAPE_STATE,
SHAPE_START,
SHAPE_END,
SHAPE_NOTE,
SHAPE_NOTEGROUP,
CSS_DIAGRAM_NOTE,
DOMID_TYPE_SPACER,
DOMID_STATE,
NOTE_ID,
PARENT_ID,
NOTE,
PARENT,
} from './stateCommon.js'; } from './stateCommon.js';
import { rect } from 'dagre-d3-es/src/dagre-js/intersect/index.js'; import { node } from 'stylis';
const START_NODE = '[*]'; const START_NODE = '[*]';
const START_TYPE = 'start'; const START_TYPE = 'start';
@@ -54,6 +73,12 @@ let direction = DEFAULT_DIAGRAM_DIRECTION;
let rootDoc = []; let rootDoc = [];
let classes = newClassesList(); // style classes defined by a classDef let classes = newClassesList(); // style classes defined by a classDef
// --------------------------------------
// List of nodes created from the parsed diagram statement items
let nodeDb = {};
let graphItemCount = 0; // used to construct ids, etc.
const newDoc = () => { const newDoc = () => {
return { return {
relations: [], relations: [],
@@ -548,97 +573,257 @@ const setDirection = (dir) => {
const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim()); const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim());
const dataFetcher = (parentId, doc, nodes, edges) => { const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, useRough) => {
extract(doc); console.log(
'parent, parsedItemm, diagramStates, nodes, edges, altFlag, useRough:',
parent,
parsedItem,
diagramStates,
nodes,
edges,
altFlag,
useRough
);
const itemId = parsedItem.id;
const classStr = getClassesFromDbInfo(diagramStates[itemId]);
//states if (itemId !== 'root') {
const useRough = true; let shape = SHAPE_STATE;
const stateKeys = Object.keys(currentDocument.states); if (parsedItem.start === true) {
shape = SHAPE_START;
stateKeys.forEach((key) => {
const item = currentDocument.states[key];
let itemShape = 'rect';
if (item.type === 'default' && item.id === 'root_start') {
itemShape = 'stateStart';
} }
if (item.type === 'default' && item.id === 'root_end') { if (parsedItem.start === false) {
itemShape = 'stateEnd'; shape = SHAPE_END;
}
if (parsedItem.type !== DEFAULT_STATE_TYPE) {
shape = parsedItem.type;
} }
if (item.type === 'fork' || item.type === 'join') { // Add the node to our list (nodeDb)
itemShape = 'forkJoin'; if (!nodeDb[itemId]) {
nodeDb[itemId] = {
id: itemId,
shape,
description: common.sanitizeText(itemId, getConfig()),
classes: `${classStr} ${CSS_DIAGRAM_STATE}`,
};
} }
if (item.type === 'choice') { const newNode = nodeDb[itemId];
itemShape = 'choice'; console.log('New Node:', newNode);
// Save data for description and group so that for instance a statement without description overwrites
// one with description @todo TODO What does this mean? If important, add a test for it
// Build of the array of description strings
if (parsedItem.description) {
if (Array.isArray(newNode.description)) {
// There already is an array of strings,add to it
newNode.shape = SHAPE_STATE_WITH_DESC;
newNode.description.push(parsedItem.description);
} else {
if (newNode.description?.length > 0) {
// if there is a description already transform it to an array
newNode.shape = SHAPE_STATE_WITH_DESC;
if (newNode.description === itemId) {
// If the previous description was this, remove it
newNode.description = [parsedItem.description];
} else {
newNode.description = [newNode.description, parsedItem.description];
}
} else {
newNode.shape = SHAPE_STATE;
newNode.description = parsedItem.description;
}
}
newNode.description = common.sanitizeTextOrArray(newNode.description, getConfig());
} }
if (item.id === '</choice>' && item.type === 'default') { // If there's only 1 description entry, just use a regular state shape
//ignore this item if (newNode.description?.length === 1 && newNode.shape === SHAPE_STATE_WITH_DESC) {
return; newNode.shape = SHAPE_STATE;
} }
if (item.id === '</join></fork>' && item.type === 'default') { // group
//ignore this item if (!newNode.type && parsedItem.doc) {
return; log.info('Setting cluster for ', itemId, getDir(parsedItem));
newNode.type = 'group';
newNode.dir = getDir(parsedItem);
newNode.shape = parsedItem.type === DIVIDER_TYPE ? SHAPE_DIVIDER : SHAPE_GROUP;
newNode.classes =
newNode.classes +
' ' +
CSS_DIAGRAM_CLUSTER +
' ' +
(altFlag ? CSS_DIAGRAM_CLUSTER_ALT : '');
} }
if (parentId) { // This is what will be added to the graph
nodes.push({ const nodeData = {
...item, labelStyle: '',
labelText: item.id, shape: newNode.shape,
labelType: 'text', labelText: newNode.description,
parentId, classes: newNode.classes,
shape: itemShape, style: '',
useRough, id: itemId,
dir: newNode.dir,
domId: stateDomId(itemId, graphItemCount),
type: newNode.type,
padding: 15,
rx: 10,
ry: 10,
useRough,
};
if (parent && parent.id !== 'root') {
log.trace('Setting node ', itemId, ' to be child of its parent ', parent.id);
nodeData.parentId = parent.id;
}
nodeData.centerLabel = true;
if (parsedItem.note) {
// Todo: set random id
const noteData = {
labelStyle: '',
shape: SHAPE_NOTE,
labelText: parsedItem.note.text,
classes: CSS_DIAGRAM_NOTE,
// useHtmlLabels: false,
style: '', // styles.style,
id: itemId + NOTE_ID + '-' + graphItemCount,
domId: stateDomId(itemId, graphItemCount, NOTE),
type: newNode.type,
padding: 15, //getConfig().flowchart.padding
};
const groupData = {
labelStyle: '',
shape: SHAPE_NOTEGROUP,
labelText: parsedItem.note.text,
classes: newNode.classes,
style: '', // styles.style,
id: itemId + PARENT_ID,
domId: stateDomId(itemId, graphItemCount, PARENT),
type: 'group',
padding: 0, //getConfig().flowchart.padding
};
graphItemCount++;
const parentNodeId = itemId + PARENT_ID;
//add parent id to groupData
groupData.id = parentNodeId;
//add parent id to noteData
noteData.parentId = parentId;
nodes.push(groupData);
nodes.push(noteData);
nodes.push(nodeData);
let from = itemId;
let to = noteData.id;
if (parsedItem.note.position === 'left of') {
from = noteData.id;
to = itemId;
}
edges.push({
id: from + '-' + to,
start: from,
end: to,
arrowhead: 'none',
arrowTypeEnd: '',
style: G_EDGE_STYLE,
labelStyle: '',
classes: CSS_EDGE_NOTE_EDGE,
arrowheadStyle: G_EDGE_ARROWHEADSTYLE,
labelpos: G_EDGE_LABELPOS,
labelType: G_EDGE_LABELTYPE,
thickness: G_EDGE_THICKNESS,
}); });
} else { } else {
nodes.push({ nodes.push(nodeData);
...item, }
id: item.id,
labelText: item.descriptions?.length > 0 ? item.descriptions[0] : item.id, console.log('Nodes:', nodes);
// description: item.id, }
labelType: 'text', if (parsedItem.doc) {
labelStyle: '', log.trace('Adding nodes children ');
shape: itemShape, setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, useRough);
padding: 15, }
classes: ' statediagram-state', };
rx: 10,
ry: 10, /**
useRough, * Create a standard string for the dom ID of an item.
}); * If a type is given, insert that before the counter, preceded by the type spacer
*
* @param itemId
* @param counter
* @param {string | null} type
* @param typeSpacer
* @returns {string}
*/
export function stateDomId(itemId = '', counter = 0, type = '', typeSpacer = DOMID_TYPE_SPACER) {
const typeStr = type !== null && type.length > 0 ? `${typeSpacer}${type}` : '';
return `${DOMID_STATE}-${itemId}${typeStr}-${counter}`;
}
const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, useRough) => {
// graphItemCount = 0;
log.trace('items', doc);
doc.forEach((item) => {
switch (item.stmt) {
case STMT_STATE:
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough);
break;
case DEFAULT_STATE_TYPE:
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough);
break;
case STMT_RELATION:
{
dataFetcher(
parentParsedItem,
item.state1,
diagramStates,
nodes,
edges,
altFlag,
useRough
);
dataFetcher(
parentParsedItem,
item.state2,
diagramStates,
nodes,
edges,
altFlag,
useRough
);
const edgeData = {
id: 'edge' + graphItemCount,
start: item.state1.id,
end: item.state2.id,
arrowhead: 'normal',
arrowTypeEnd: 'arrow_barb',
style: G_EDGE_STYLE,
labelStyle: '',
label: common.sanitizeText(item.description, getConfig()),
arrowheadStyle: G_EDGE_ARROWHEADSTYLE,
labelpos: G_EDGE_LABELPOS,
labelType: G_EDGE_LABELTYPE,
thickness: G_EDGE_THICKNESS,
classes: CSS_EDGE,
};
edges.push(edgeData);
//g.setEdge(item.state1.id, item.state2.id, edgeData, graphItemCount);
graphItemCount++;
}
break;
} }
}); });
//edges
currentDocument.relations.forEach((item) => {
edges.push({
id: item.id1 + '-' + item.id2,
start: item.id1,
end: item.id2,
arrowhead: 'normal',
arrowTypeEnd: 'arrow_barb',
style: G_EDGE_STYLE,
labelStyle: '',
label: common.sanitizeText(item.description, getConfig()),
arrowheadStyle: G_EDGE_ARROWHEADSTYLE,
labelpos: G_EDGE_LABELPOS,
labelType: G_EDGE_LABELTYPE,
thickness: G_EDGE_THICKNESS,
classes: CSS_EDGE,
useRough,
});
});
// if (item.doc) {
// dataFetcher(item.id, item.doc, nodes, edges);
// }
//break;
// case STMT_RELATION:
// edges.push(item);
// break;
// }
}; };
export const getData = () => { export const getData = () => {
const nodes = []; const nodes = [];
const edges = []; const edges = [];
@@ -648,11 +833,56 @@ export const getData = () => {
// nodes.push({...currentDocument.states[key]}); // nodes.push({...currentDocument.states[key]});
// } // }
// } // }
dataFetcher(undefined, rootDoc, nodes, edges); extract(getRootDocV2());
const diagramStates = getStates();
const useRough = true;
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
return { nodes, edges, other: {} }; return { nodes, edges, other: {} };
}; };
/**
* Get the direction from the statement items.
* Look through all of the documents (docs) in the parsedItems
* Because is a _document_ direction, the default direction is not necessarily the same as the overall default _diagram_ direction.
* @param {object[]} parsedItem - the parsed statement item to look through
* @param [defaultDir] - the direction to use if none is found
* @returns {string}
*/
const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
let dir = defaultDir;
if (parsedItem.doc) {
for (let i = 0; i < parsedItem.doc.length; i++) {
const parsedItemDoc = parsedItem.doc[i];
if (parsedItemDoc.stmt === 'dir') {
dir = parsedItemDoc.value;
}
}
}
return dir;
};
/**
* Get classes from the db for the info item.
* If there aren't any or if dbInfoItem isn't defined, return an empty string.
* Else create 1 string from the list of classes found
*
* @param {undefined | null | object} dbInfoItem
* @returns {string}
*/
function getClassesFromDbInfo(dbInfoItem) {
if (dbInfoItem === undefined || dbInfoItem === null) {
return '';
} else {
if (dbInfoItem.classes) {
return dbInfoItem.classes.join(' ');
} else {
return '';
}
}
}
export default { export default {
getConfig: () => getConfig().state, getConfig: () => getConfig().state,
getData, getData,

2
packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
View File

@@ -3,7 +3,7 @@ import type { DiagramDefinition } from '../../diagram-api/types.js';
import parser from './parser/stateDiagram.jison'; import parser from './parser/stateDiagram.jison';
import db from './stateDb.js'; import db from './stateDb.js';
import styles from './styles.js'; import styles from './styles.js';
// import renderer from './stateRenderer-v2.js'; //import renderer from './stateRenderer-v2.js';
import renderer from './stateRenderer-v3-unified.js'; import renderer from './stateRenderer-v3-unified.js';
export const diagram: DiagramDefinition = { export const diagram: DiagramDefinition = {

3
packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
View File

@@ -201,6 +201,9 @@ export const render = async (data4Layout, svg, element) => {
// Add the nodes and edges to the graph // Add the nodes and edges to the graph
data4Layout.nodes.forEach((node) => { data4Layout.nodes.forEach((node) => {
graph.setNode(node.id, { ...node }); graph.setNode(node.id, { ...node });
if (node.parentId) {
graph.setParent(node.id, node.parentId);
}
}); });
console.log('Edges:', data4Layout.edges); console.log('Edges:', data4Layout.edges);