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

Merge branch 'develop' into sidv/esbuild

Browse Source 
* develop: (50 commits)
  Build docs
  chore: update browsers list
  Fix pre
  Fix mermaid code formatting in html
  Prettier pass
  Fix XSS htmls
  fix #3407 Replace `div` with `pre` and format
  Add change in `src/docs`
  Fix lint issue
  build: run `build:prod` on `yarn prepare`
  Build documentation
  Fix typo
  Fix typo in documentation
  Fix doc
  Add files only when running from lint-staged
  Add files only when running from lint-staged
  Fix configuration doc
  Prettier Pass
  Add dotfiles
  Prettier
  ...
This commit is contained in:
Sidharth Vinod
2022-09-05 20:31:44 +05:30
parent 99923fcd0f 579dbc8f63
commit f9bf53551f
250 changed files with 25003 additions and 5246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/dagre-wrapper/GraphObjects.md
View File

@@ -16,6 +16,7 @@ flowchart
```
In this case the dagre-wrapper will transform the graph to the graph below.
```mermaid
flowchart
C1 --> C2
@@ -28,7 +29,8 @@ When rendering this diagram it it beeing rendered recursively. The diagram is re
```
{ clusterNode: true, graph }
```
*Data for a clusterNode*
_Data for a clusterNode_
When a cluster has edges to or from some of its nodes leading outside the cluster the approach of recursive rendering can not be used as the layout of the graph needs to take responsibility for nodes outside of the cluster.
@@ -49,7 +51,6 @@ In the diagram above the root diagram would be rendered with C1 whereas C2 would
Of these two approaches the top one renders better and is used when possible. When this is not possible, ie an edge is added crossing the border the non recursive approach is used.
# Graph objects and their properties
Explains the representation of various objects used to render the flow charts and what the properties mean. This ofc from the perspective of the dagre-wrapper.
@@ -57,35 +58,36 @@ Explains the representation of various objects used to render the flow charts an
## node
Sample object:
```json
{
"shape":"rect",
"labelText":"Test",
"rx":0,
"ry":0,
"class":"default",
"style":"",
"id":"Test",
"type":"group",
"padding":15}
"shape": "rect",
"labelText": "Test",
"rx": 0,
"ry": 0,
"class": "default",
"style": "",
"id": "Test",
"type": "group",
"padding": 15
}
```
This is set by the renderer of the diagram and insert the data that the wrapper neds for rendering.
| property | description |
| ---------- | ----------------------------------------------------------------------------------------------------------- |
| labelStyle | Css styles for the label. User for instance for styling the labels for clusters |
| shape | The shape of the node. |
| labelText | The text on the label |
| rx | The corner radius - maybe part of the shape instead? Used for rects. |
| ry | The corner radius - maybe part of the shape instead? Used for rects. |
| classes | Classes to be set for the shape. Not used |
| style | Css styles for the actual shape |
| id | id of the shape |
| type | if set to group then this node indicates *a cluster*. |
| padding | Padding. Passed from the render as this might differ between different diagrams. Maybe obsolete. |
| data | Non-generic data specific to the shape. |
| property | description |
| ---------- | ------------------------------------------------------------------------------------------------ |
| labelStyle | Css styles for the label. User for instance for styling the labels for clusters |
| shape | The shape of the node. |
| labelText | The text on the label |
| rx | The corner radius - maybe part of the shape instead? Used for rects. |
| ry | The corner radius - maybe part of the shape instead? Used for rects. |
| classes | Classes to be set for the shape. Not used |
| style | Css styles for the actual shape |
| id | id of the shape |
| type | if set to group then this node indicates _a cluster_. |
| padding | Padding. Passed from the render as this might differ between different diagrams. Maybe obsolete. |
| data | Non-generic data specific to the shape. |
# edge
@@ -100,22 +102,20 @@ double_arrow_circle
Lets try to make these types semantic free so that diagram type semantics does not find its way in to this more generic layer.
Required edgeData for proper rendering:
| property | description |
| ---------- | ---------------------------------------- |
| id | Id of the edge |
| arrowHead | overlap between arrowHead and arrowType? |
| arrowType | overlap between arrowHead and arrowType? |
| style | |
| labelStyle | |
| label | overlap between label and labelText? |
| labelPos | |
| labelType | overlap between label and labelText? |
| thickness | Sets the thinkess of the edge. Can be \['normal', 'thick'\] |
| pattern | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\] |
| property | description |
| ---------- | -------------------------------------------------------------------- |
| id | Id of the edge |
| arrowHead | overlap between arrowHead and arrowType? |
| arrowType | overlap between arrowHead and arrowType? |
| style | |
| labelStyle | |
| label | overlap between label and labelText? |
| labelPos | |
| labelType | overlap between label and labelText? |
| thickness | Sets the thinkess of the edge. Can be \['normal', 'thick'\] |
| pattern | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\] |
# Markers
@@ -127,12 +127,13 @@ insertMarkers(el, \['point', 'circle'\])
The example above adds the markers point and cross. This means that edges with the arrowTypes arrow_cross, double_arrow_cross, arrow_point and double_arrow_cross will get the corresponding markers but arrowType arrow_cross will have no impact.
Current markers:
* point - the standard arrow from flowcharts
* circle - Arrows ending with circle
* cross - arrows starting and ending with a cross
- point - the standard arrow from flowcharts
- circle - Arrows ending with circle
- cross - arrows starting and ending with a cross
// Todo - in case of common renderer
# Common functions used by the renderer to be implemented by the Db
getDirection

2
src/dagre-wrapper/createLabel.js
View File

@@ -1,5 +1,5 @@
import { select } from 'd3';
import { log } from '../logger'; // eslint-disable-line
import { log } from '../logger';
import { getConfig } from '../config';
import { sanitizeText, evaluate } from '../diagrams/common/common';
import { decodeEntities } from '../mermaidAPI';

4
src/dagre-wrapper/edges.js
View File

@@ -1,4 +1,4 @@
import { log } from '../logger'; // eslint-disable-line
import { log } from '../logger';
import createLabel from './createLabel';
import { line, curveBasis, select } from 'd3';
import { getConfig } from '../config';
@@ -240,7 +240,7 @@ export const intersection = (node, outsidePoint, insidePoint) => {
const Q = Math.abs(outsidePoint.y - insidePoint.y);
const R = Math.abs(outsidePoint.x - insidePoint.x);
// log.warn();
if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) { // eslint-disable-line
if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
// Intersection is top or bottom of rect.
// let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;

4
src/dagre-wrapper/index.js
View File

@@ -19,7 +19,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
const dir = graph.graph().rankdir;
log.trace('Dir in recursive render - dir:', dir);
const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
const elem = _elem.insert('g').attr('class', 'root');
if (!graph.nodes()) {
log.info('No nodes found for', graph);
} else {
@@ -28,7 +28,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
if (graph.edges().length > 0) {
log.trace('Recursive edges', graph.edge(graph.edges()[0]));
}
const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
const clusters = elem.insert('g').attr('class', 'clusters');
const edgePaths = elem.insert('g').attr('class', 'edgePaths');
const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
const nodes = elem.insert('g').attr('class', 'nodes');

2
src/dagre-wrapper/nodes.js
View File

@@ -1,5 +1,5 @@
import { select } from 'd3';
import { log } from '../logger'; // eslint-disable-line
import { log } from '../logger';
import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';
import { getConfig } from '../config';
import intersect from './intersect/index.js';

2
src/dagre-wrapper/shapes/note.js
View File

@@ -1,5 +1,5 @@
import { updateNodeBounds, labelHelper } from './util';
import { log } from '../../logger'; // eslint-disable-line
import { log } from '../../logger';
import intersect from '../intersect/index.js';
const note = (parent, node) => {