diff --git a/docs/intro/examples.md b/docs/intro/examples.md new file mode 100644 index 000000000..0909a8cd3 --- /dev/null +++ b/docs/intro/examples.md @@ -0,0 +1,247 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/examples.md](../../packages/mermaid/src/docs/intro/examples.md). + +## Diagram Types + +### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax) + +```mermaid-example +graph TD; + A-->B; + A-->C; + B-->D; + C-->D; +``` + +```mermaid +graph TD; + A-->B; + A-->C; + B-->D; + C-->D; +``` + +### [Sequence diagram](../syntax/sequenceDiagram.md) + +```mermaid-example +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop HealthCheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +``` + +```mermaid +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop HealthCheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +``` + +### [Gantt diagram](../syntax/gantt.md) + +```mermaid-example +gantt +dateFormat YYYY-MM-DD +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 +``` + +```mermaid +gantt +dateFormat YYYY-MM-DD +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 +``` + +### [Class diagram](../syntax/classDiagram.md) + +```mermaid-example +classDiagram +Class01 <|-- AveryLongClass : Cool +Class03 *-- Class04 +Class05 o-- Class06 +Class07 .. Class08 +Class09 --> C2 : Where am i? +Class09 --* C3 +Class09 --|> Class07 +Class07 : equals() +Class07 : Object[] elementData +Class01 : size() +Class01 : int chimp +Class01 : int gorilla +Class08 <--> C2: Cool label +``` + +```mermaid +classDiagram +Class01 <|-- AveryLongClass : Cool +Class03 *-- Class04 +Class05 o-- Class06 +Class07 .. Class08 +Class09 --> C2 : Where am i? +Class09 --* C3 +Class09 --|> Class07 +Class07 : equals() +Class07 : Object[] elementData +Class01 : size() +Class01 : int chimp +Class01 : int gorilla +Class08 <--> C2: Cool label +``` + +### [Git graph](../syntax/gitgraph.md) + +```mermaid-example + gitGraph + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit +``` + +```mermaid + gitGraph + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit +``` + +### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md) + +```mermaid-example +erDiagram + CUSTOMER ||--o{ ORDER : places + ORDER ||--|{ LINE-ITEM : contains + CUSTOMER }|..|{ DELIVERY-ADDRESS : uses + +``` + +```mermaid +erDiagram + CUSTOMER ||--o{ ORDER : places + ORDER ||--|{ LINE-ITEM : contains + CUSTOMER }|..|{ DELIVERY-ADDRESS : uses + +``` + +### [User Journey Diagram](../syntax/userJourney.md) + +```mermaid-example +journey + title My working day + 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 +``` + +```mermaid +journey + title My working day + 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 +``` + +### [Quadrant Chart](../syntax/quadrantChart.md) + +```mermaid-example +quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + Campaign A: [0.3, 0.6] + Campaign B: [0.45, 0.23] + Campaign C: [0.57, 0.69] + Campaign D: [0.78, 0.34] + Campaign E: [0.40, 0.34] + Campaign F: [0.35, 0.78] +``` + +```mermaid +quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + Campaign A: [0.3, 0.6] + Campaign B: [0.45, 0.23] + Campaign C: [0.57, 0.69] + Campaign D: [0.78, 0.34] + Campaign E: [0.40, 0.34] + Campaign F: [0.35, 0.78] +``` + +### [XY Chart](../syntax/xyChart.md) + +```mermaid-example +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` + +```mermaid +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` diff --git a/packages/mermaid-layout-elk/package.json b/packages/mermaid-layout-elk/package.json index a98185ea9..551468947 100644 --- a/packages/mermaid-layout-elk/package.json +++ b/packages/mermaid-layout-elk/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-chart/layout-elk", - "version": "0.1.2-b.1", + "version": "0.1.2-b.3", "description": "ELK layout engine for mermaid", "module": "dist/mermaid-layout-elk.core.mjs", "types": "dist/layouts.d.ts", diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts index 7ac43bb7f..c6f9c0f67 100644 --- a/packages/mermaid-layout-elk/src/render.ts +++ b/packages/mermaid-layout-elk/src/render.ts @@ -272,7 +272,7 @@ export const render = async ( linkIdCnt[linkIdBase]++; log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]); } - const linkId = linkIdBase + '_' + linkIdCnt[linkIdBase]; + const linkId = linkIdBase; // + '_' + linkIdCnt[linkIdBase]; edge.id = linkId; log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]); const linkNameStart = 'LS_' + edge.start; @@ -517,8 +517,8 @@ export const render = async ( const x1 = bounds.x; const y1 = bounds.y; - const w = bounds.width; //+ bounds.padding; - const h = bounds.height; // + bounds.padding; + const w = bounds.width - 0.1; //+ bounds.padding; + const h = bounds.height - 0.1; // + bounds.padding; const polyPoints = [ { x: x1, y: y1 - h / 2 }, @@ -675,7 +675,22 @@ export const render = async ( return false; }; /** - * This function will page a path and node where the last point(s) in the path is inside the node + * This function will take a path and node where the last point(s) in the path is inside the node + * and return an update path ending by the border of the node. + */ + // const cutPathAtIntersect2 = (node: any, _points: any[], offset: any, bounds: any) => { + // // Iterate over the points in the path and check if the point is inside the node + // const points: any[] = []; + // let lastPointOutside = _points[0]; + // let isInside = false; + // _points.forEach((point: any) => { + // const int = node.intersect(point); + // // console.log('UIO cutPathAtIntersect2 Points:', point, 'int', int); + // }); + // return points; + // }; + /** + * This function will take a path and node where the last point(s) in the path is inside the node * and return an update path ending by the border of the node. */ const cutPathAtIntersect = ( @@ -968,6 +983,22 @@ export const render = async ( } } + // edge.points = cutPathAtIntersect2(startNode, edge.points.reverse(), offset, { + // x: startNode.x + startNode.width / 2 + offset.x, + // y: startNode.y + startNode.height / 2 + offset.y, + // width: sw, + // height: startNode.height, + // padding: startNode.padding, + // }).reverse(); + + // edge.points = cutPathAtIntersect2(endNode, edge.points, offset, { + // x: endNode.x + ew / 2 + endNode.offset.x, + // y: endNode.y + endNode.height / 2 + endNode.offset.y, + // width: ew, + // height: endNode.height, + // padding: endNode.padding, + // }); + edge.points = cutPathAtIntersect( edge.points.reverse(), { diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 2cbc00c96..9a85d8395 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-chart/mermaid", - "version": "11.0.2-b.6", + "version": "11.0.2-b.7", "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.", "type": "module", "module": "./dist/mermaid.core.mjs", diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index e74995ce3..f8164f271 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -1,4 +1,4 @@ -# Architecture Diagrams Documentation (v+) +# Architecture Diagrams Documentation (v11.0.2-b.7+) > In the context of mermaid-js, the architecture diagram is used to show the relationship between services and resources commonly found within the Cloud or CI/CD deployments. In an architecture diagram, services (nodes) are connected by edges. Related services can be placed within groups to better illustrate how they are organized.