marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-17 03:04:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into next

Browse Source 
* develop: (39 commits)
  reset the testTimeout to 5 seconds and change it directly in the test
  update testTimeout from 5 seconds to 10 seconds
  Update all patch dependencies
  fix broken link
  add latest blog post
  Update all minor dependencies
  fix linting
  fix: set proper shiki theme for light and dark modes
  fix: change shiki theme to github-light
  add latest blog post
  GitGraph: made reroute fn more readable
  GitGraph: simplified branch check in arrow rerouting fn
  GitGraph: added commit IDs to e2e test to remove false positives
  GitGraph: Moved branch curve check to within reroute check fn
  GitGraph: corrected minor typo in comment.
  GitGraph: added 2x e2e tests for branches not used immediately
  GitGraph: added branch checking to rerouting
  GitGraph: Added e2e tests for deferred branch use.
  GitGraph: e2e tests, added commit IDs to test graphs
  GitGraph: fixed an e2e branch for vertical branch
  ...
This commit is contained in:
Sidharth Vinod
2023-11-24 09:54:02 +05:30
parent 510549f365 8f733c6b01
commit a2db4a464a
14 changed files with 1225 additions and 461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
cypress/integration/rendering/gitGraph.spec.js
View File

@@ -701,4 +701,114 @@ gitGraph TB:
{} {}
); );
}); });
it('34: should render a simple gitgraph with two branches from same commit', () => {
imgSnapshotTest(
`gitGraph
commit id:"1-abcdefg"
commit id:"2-abcdefg"
branch feature-001
commit id:"3-abcdefg"
commit id:"4-abcdefg"
checkout main
branch feature-002
commit id:"5-abcdefg"
checkout feature-001
merge feature-002
`,
{}
);
});
it('35: should render a simple gitgraph with two branches from same commit | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id:"1-abcdefg"
commit id:"2-abcdefg"
branch feature-001
commit id:"3-abcdefg"
commit id:"4-abcdefg"
checkout main
branch feature-002
commit id:"5-abcdefg"
checkout feature-001
merge feature-002
`,
{}
);
});
it('36: should render GitGraph with branch that is not used immediately', () => {
imgSnapshotTest(
`gitGraph LR:
commit id:"1-abcdefg"
branch x
checkout main
commit id:"2-abcdefg"
checkout x
commit id:"3-abcdefg"
checkout main
merge x
`,
{}
);
});
it('37: should render GitGraph with branch that is not used immediately | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id:"1-abcdefg"
branch x
checkout main
commit id:"2-abcdefg"
checkout x
commit id:"3-abcdefg"
checkout main
merge x
`,
{}
);
});
it('38: should render GitGraph with branch and sub-branch neither of which used immediately', () => {
imgSnapshotTest(
`gitGraph LR:
commit id:"1-abcdefg"
branch x
checkout main
commit id:"2-abcdefg"
checkout x
commit id:"3-abcdefg"
checkout main
merge x
checkout x
branch y
checkout x
commit id:"4-abcdefg"
checkout y
commit id:"5-abcdefg"
checkout x
merge y
`,
{}
);
});
it('39: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id:"1-abcdefg"
branch x
checkout main
commit id:"2-abcdefg"
checkout x
commit id:"3-abcdefg"
checkout main
merge x
checkout x
branch y
checkout x
commit id:"4-abcdefg"
checkout y
commit id:"5-abcdefg"
checkout x
merge y
`,
{}
);
});
}); });

358
demos/git.html
View File

@@ -14,30 +14,364 @@
</head> </head>
<body> <body>
<h1>Git diagram demo</h1> <h1>Git graph demo</h1>
<h2>Simple "branch and merge" graph</h2>
<pre class="mermaid"> <pre class="mermaid">
--- ---
title: Simple Git diagram title: Simple "branch and merge" (left-to-right)
--- ---
gitGraph: gitGraph LR:
options
{
"nodeSpacing": 50,
"nodeRadius": 5
}
end
branch master
commit commit
branch newbranch branch newbranch
checkout newbranch checkout newbranch
commit commit
checkout main
merge newbranch
</pre>
<pre class="mermaid">
---
title: Simple "branch and merge" (top-to-bottom)
---
gitGraph TB:
commit commit
checkout master branch newbranch
checkout newbranch
commit commit
checkout main
merge newbranch
</pre>
<h2>Continuous development graph</h2>
<pre class="mermaid">
---
title: Continuous development (left-to-right)
---
gitGraph LR:
commit
branch develop
checkout develop
commit
checkout main
merge develop
checkout develop
commit
checkout main
merge develop
</pre>
<pre class="mermaid">
---
title: Continuous development (top-to-bottom)
---
gitGraph TB:
commit
branch develop
checkout develop
commit
checkout main
merge develop
checkout develop
commit
checkout main
merge develop
</pre>
<h2>Merge feature to advanced main graph</h2>
<pre class="mermaid">
---
title: Merge feature to advanced main (left-to-right)
---
gitGraph LR:
commit
branch newbranch
checkout newbranch
commit
checkout main
commit commit
merge newbranch merge newbranch
</pre> </pre>
<pre class="mermaid">
---
title: Merge feature to advanced main (top-to-bottom)
---
gitGraph TB:
commit
branch newbranch
checkout newbranch
commit
checkout main
commit
merge newbranch
</pre>
<h2>Two-way merges</h2>
<pre class="mermaid">
---
title: Two-way merges (left-to-right)
---
gitGraph LR:
commit
branch develop
checkout develop
commit
checkout main
merge develop
commit
checkout develop
merge main
commit
checkout main
merge develop
</pre>
<pre class="mermaid">
---
title: Two-way merges (top-to-bottom)
---
gitGraph TB:
commit
branch develop
checkout develop
commit
checkout main
merge develop
commit
checkout develop
merge main
commit
checkout main
merge develop
</pre>
<h2>Cherry-pick from branch graph</h2>
<pre class="mermaid">
---
title: Cherry-pick from branch (left-to-right)
---
gitGraph LR:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"
</pre>
<pre class="mermaid">
---
title: Cherry-pick from branch (top-to-bottom)
---
gitGraph TB:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"
</pre>
<h2>Cherry-pick from main graph</h2>
<pre class="mermaid">
---
title: Cherry-pick from main (left-to-right)
---
gitGraph LR:
commit
branch develop
commit
checkout main
commit id:"A"
checkout develop
commit
cherry-pick id: "A"
</pre>
<pre class="mermaid">
---
title: Cherry-pick from main (top-to-bottom)
---
gitGraph TB:
commit
branch develop
commit
checkout main
commit id:"A"
checkout develop
commit
cherry-pick id: "A"
</pre>
<h2>Cherry-pick then merge graph</h2>
<pre class="mermaid">
---
title: Cherry-pick then merge (left-to-right)
---
gitGraph LR:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"
merge newbranch
</pre>
<pre class="mermaid">
---
title: Cherry-pick then merge (top-to-bottom)
---
gitGraph TB:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"
merge newbranch
</pre>
<h2>Merge from main onto undeveloped branch graph</h2>
<pre class="mermaid">
---
title: Merge from main onto undeveloped branch (left-to-right)
---
gitGraph LR:
commit
branch develop
commit
checkout main
commit
checkout develop
merge main
</pre>
<pre class="mermaid">
---
title: Merge from main onto undeveloped branch (top-to-bottom)
---
gitGraph TB:
commit
branch develop
commit
checkout main
commit
checkout develop
merge main
</pre>
<h2>Merge from main onto developed branch graph</h2>
<pre class="mermaid">
---
title: Merge from main onto developed branch (left-to-right)
---
gitGraph LR:
commit
branch develop
commit
checkout main
commit
checkout develop
commit
merge main
</pre>
<pre class="mermaid">
---
title: Merge from main onto developed branch (top-to-bottom)
---
gitGraph TB:
commit
branch develop
commit
checkout main
commit
checkout develop
commit
merge main
</pre>
<h2>Two branches from same commit graph</h2>
<pre class="mermaid">
---
title: Two branches from same commit (left-to-right)
---
gitGraph LR:
commit
commit
branch feature-001
commit
commit
checkout main
branch feature-002
commit
checkout feature-001
merge feature-002
</pre>
<pre class="mermaid">
---
title: Two branches from same commit (top-to-bottom)
---
gitGraph TB:
commit
commit
branch feature-001
commit
commit
checkout main
branch feature-002
commit
checkout feature-001
merge feature-002
</pre>
<h2>Three branches and a cherry-pick from each graph</h2>
<pre class="mermaid">
---
title: Three branches and a cherry-pick from each (left-to-right)
---
gitGraph LR:
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
branch featureA
commit id:"FIX"
commit id: "FIX-2"
checkout main
commit id:"TWO"
cherry-pick id:"A"
commit id:"THREE"
cherry-pick id:"FIX"
checkout develop
commit id:"C"
merge featureA
</pre>
<pre class="mermaid">
---
title: Three branches and a cherry-pick from each (top-to-bottom)
---
gitGraph TB:
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
branch featureA
commit id:"FIX"
commit id: "FIX-2"
checkout main
commit id:"TWO"
cherry-pick id:"A"
commit id:"THREE"
cherry-pick id:"FIX"
checkout develop
commit id:"C"
merge featureA
</pre>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
const ALLOWED_TAGS = [ const ALLOWED_TAGS = [

2
docs/ecosystem/integrations-community.md
View File

@@ -179,7 +179,7 @@ Communication tools and platforms
### Document Generation ### Document Generation
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅ - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts) - [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
- [Sphinx](https://www.sphinx-doc.org/en/master/) - [Sphinx](https://www.sphinx-doc.org/en/master/)
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid) - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
- [remark](https://remark.js.org/) - [remark](https://remark.js.org/)

16
docs/news/announcements.md
View File

@@ -6,18 +6,10 @@
# Announcements # Announcements
<br /> Check out our latest blog posts below. See more blog posts [here](blog.md).
<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> ## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
## Calling all fans of Mermaid and Mermaid Chart! 🎉 14 November 2023 · 5 mins
We’ve officially made our Product Hunt debut, and would love any and all support from the community! Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch.
Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year.
We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen.
Your support means the world to us. Thank you for being part of the diagramming movement.

18
docs/news/blog.md
View File

@@ -6,6 +6,24 @@
# Blog # Blog
## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
14 November 2023 · 5 mins
Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
1 November 2023 · 5 mins
Would an AI diagram generator make your life easier?
## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
12 October 2023 · 4 mins
Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals.
## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) ## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
22 September 2023 · 7 mins 22 September 2023 · 7 mins

2
package.json
View File

@@ -4,7 +4,7 @@
"version": "10.2.4", "version": "10.2.4",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module", "type": "module",
"packageManager": "pnpm@8.10.4", "packageManager": "pnpm@8.10.5",
"keywords": [ "keywords": [
"diagram", "diagram",
"markdown", "markdown",

91
packages/mermaid/src/diagrams/git/gitGraphRenderer.js
View File

@@ -338,26 +338,34 @@ const drawCommits = (svg, commits, modifyGraph) => {
}; };
/** /**
* Detect if there are other commits between commit1's x-position and commit2's x-position on the * Detect if there are commits
* same branch as commit2. * between commitA's x-position
* and commitB's x-position on the
* same branch as commitA, where
* commitA isn't main
* *
* @param {any} commit1 * @param {any} commitA
* @param {any} commit2 * @param {any} commitB
* @param branchToGetCurve
* @param p1
* @param p2
* @param allCommits * @param allCommits
* @returns {boolean} If there are commits between commit1's x-position and commit2's x-position * @returns {boolean}
* If there are commits between
* commitA's x-position
* and commitB's x-position
* on the source branch, where
* source branch is not main
* return true
*/ */
const hasOverlappingCommits = (commit1, commit2, allCommits) => { const shouldRerouteArrow = (commitA, commitB, p1, p2, allCommits) => {
// Find commits on the same branch as commit2 const commitBIsFurthest = dir === 'TB' ? p1.x < p2.x : p1.y < p2.y;
const keys = Object.keys(allCommits); const branchToGetCurve = commitBIsFurthest ? commitB.branch : commitA.branch;
const overlappingComits = keys.filter((key) => { const isOnBranchToGetCurve = (x) => x.branch === branchToGetCurve;
return ( const isBetweenCommits = (x) => x.seq > commitA.seq && x.seq < commitB.seq;
allCommits[key].branch === commit2.branch && return Object.values(allCommits).some((commitX) => {
allCommits[key].seq > commit1.seq && return isBetweenCommits(commitX) && isOnBranchToGetCurve(commitX);
allCommits[key].seq < commit2.seq
);
}); });
return overlappingComits.length > 0;
}; };
/** /**
@@ -388,49 +396,61 @@ const findLane = (y1, y2, depth = 0) => {
* Draw the lines between the commits. They were arrows initially. * Draw the lines between the commits. They were arrows initially.
* *
* @param {any} svg * @param {any} svg
* @param {any} commit1 * @param {any} commitA
* @param {any} commit2 * @param {any} commitB
* @param {any} allCommits * @param {any} allCommits
*/ */
const drawArrow = (svg, commit1, commit2, allCommits) => { const drawArrow = (svg, commitA, commitB, allCommits) => {
const p1 = commitPos[commit1.id]; const p1 = commitPos[commitA.id]; // arrowStart
const p2 = commitPos[commit2.id]; const p2 = commitPos[commitB.id]; // arrowEnd
const overlappingCommits = hasOverlappingCommits(commit1, commit2, allCommits); const arrowNeedsRerouting = shouldRerouteArrow(commitA, commitB, p1, p2, allCommits);
// log.debug('drawArrow', p1, p2, overlappingCommits, commit1.id, commit2.id); // log.debug('drawArrow', p1, p2, arrowNeedsRerouting, commitA.id, commitB.id);
// Lower-right quadrant logic; top-left is 0,0
let arc = ''; let arc = '';
let arc2 = ''; let arc2 = '';
let radius = 0; let radius = 0;
let offset = 0; let offset = 0;
let colorClassNum = branchPos[commit2.branch].index; let colorClassNum = branchPos[commitB.branch].index;
let lineDef; let lineDef;
if (overlappingCommits) { if (arrowNeedsRerouting) {
arc = 'A 10 10, 0, 0, 0,'; arc = 'A 10 10, 0, 0, 0,';
arc2 = 'A 10 10, 0, 0, 1,'; arc2 = 'A 10 10, 0, 0, 1,';
radius = 10; radius = 10;
offset = 10; offset = 10;
// Figure out the color of the arrow,arrows going down take the color from the destination branch
colorClassNum = branchPos[commit2.branch].index;
const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y); const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y);
const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x); const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x);
if (dir === 'TB') { if (dir === 'TB') {
if (p1.x < p2.x) { if (p1.x < p2.x) {
// Source commit is on branch position left of destination commit
// so render arrow rightward with colour of destination branch
colorClassNum = branchPos[commitB.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${ lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${
p1.y + offset p1.y + offset
} L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`; } L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
} else { } else {
// Source commit is on branch position right of destination commit
// so render arrow leftward with colour of source branch
colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${ lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${
p1.y + offset p1.y + offset
} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
} }
} else { } else {
if (p1.y < p2.y) { if (p1.y < p2.y) {
// Source commit is on branch positioned above destination commit
// so render arrow downward with colour of destination branch
colorClassNum = branchPos[commitB.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${ lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${
p1.x + offset p1.x + offset
} ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`; } ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
} else { } else {
// Source commit is on branch positioned below destination commit
// so render arrow upward with colour of source branch
colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${ lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
p1.x + offset p1.x + offset
} ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`; } ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
@@ -445,7 +465,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
offset = 20; offset = 20;
// Figure out the color of the arrow,arrows going down take the color from the destination branch // Figure out the color of the arrow,arrows going down take the color from the destination branch
colorClassNum = branchPos[commit2.branch].index; colorClassNum = branchPos[commitB.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${ lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
p1.y + offset p1.y + offset
@@ -458,14 +478,14 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
offset = 20; offset = 20;
// Arrows going up take the color from the source branch // Arrows going up take the color from the source branch
colorClassNum = branchPos[commit1.branch].index; colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${ lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
p2.y p2.y
} L ${p2.x} ${p2.y}`; } L ${p2.x} ${p2.y}`;
} }
if (p1.x === p2.x) { if (p1.x === p2.x) {
colorClassNum = branchPos[commit1.branch].index; colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${ lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${
p2.y + radius p2.y + radius
} L ${p2.x} ${p2.y}`; } L ${p2.x} ${p2.y}`;
@@ -475,10 +495,8 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
arc = 'A 20 20, 0, 0, 0,'; arc = 'A 20 20, 0, 0, 0,';
radius = 20; radius = 20;
offset = 20; offset = 20;
// Arrows going up take the color from the target branch
// Figure out the color of the arrow,arrows going down take the color from the destination branch colorClassNum = branchPos[commitB.branch].index;
colorClassNum = branchPos[commit2.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
p2.x p2.x
} ${p2.y}`; } ${p2.y}`;
@@ -487,16 +505,15 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
arc = 'A 20 20, 0, 0, 0,'; arc = 'A 20 20, 0, 0, 0,';
radius = 20; radius = 20;
offset = 20; offset = 20;
// Arrows going up take the color from the source branch // Arrows going up take the color from the source branch
colorClassNum = branchPos[commit1.branch].index; colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${ lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
p2.x p2.x
} ${p2.y}`; } ${p2.y}`;
} }
if (p1.y === p2.y) { if (p1.y === p2.y) {
colorClassNum = branchPos[commit1.branch].index; colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
p2.x p2.x
} ${p2.y}`; } ${p2.y}`;

5
packages/mermaid/src/docs/.vitepress/config.ts
View File

@@ -4,7 +4,10 @@ import { defineConfig, MarkdownOptions } from 'vitepress';
const allMarkdownTransformers: MarkdownOptions = { const allMarkdownTransformers: MarkdownOptions = {
// the shiki theme to highlight code blocks // the shiki theme to highlight code blocks
theme: 'github-dark', theme: {
light: 'github-light',
dark: 'github-dark',
},
config: async (md) => { config: async (md) => {
await MermaidExample(md); await MermaidExample(md);
}, },

2
packages/mermaid/src/docs/ecosystem/integrations-community.md
View File

@@ -177,7 +177,7 @@ Communication tools and platforms
### Document Generation ### Document Generation
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅ - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts) - [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
- [Sphinx](https://www.sphinx-doc.org/en/master/) - [Sphinx](https://www.sphinx-doc.org/en/master/)
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid) - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
- [remark](https://remark.js.org/) - [remark](https://remark.js.org/)

16
packages/mermaid/src/docs/news/announcements.md
View File

@@ -1,17 +1,9 @@
# Announcements # Announcements
<br /> Check out our latest blog posts below. See more blog posts [here](blog.md).
<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> ## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
## Calling all fans of Mermaid and Mermaid Chart! 🎉 14 November 2023 · 5 mins
We’ve officially made our Product Hunt debut, and would love any and all support from the community! Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch.
Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year.
We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen.
Your support means the world to us. Thank you for being part of the diagramming movement.

18
packages/mermaid/src/docs/news/blog.md
View File

@@ -1,5 +1,23 @@
# Blog # Blog
## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
14 November 2023 · 5 mins
Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
1 November 2023 · 5 mins
Would an AI diagram generator make your life easier?
## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
12 October 2023 · 4 mins
Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals.
## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) ## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
22 September 2023 · 7 mins 22 September 2023 · 7 mins

6
packages/mermaid/src/docs/package.json
View File

@@ -23,7 +23,7 @@
"devDependencies": { "devDependencies": {
"@iconify-json/carbon": "^1.1.16", "@iconify-json/carbon": "^1.1.16",
"@unocss/reset": "^0.57.0", "@unocss/reset": "^0.57.0",
"@vite-pwa/vitepress": "^0.2.0", "@vite-pwa/vitepress": "^0.3.0",
"@vitejs/plugin-vue": "^4.2.1", "@vitejs/plugin-vue": "^4.2.1",
"fast-glob": "^3.2.12", "fast-glob": "^3.2.12",
"https-localhost": "^4.7.1", "https-localhost": "^4.7.1",
@@ -31,8 +31,8 @@
"unocss": "^0.57.0", "unocss": "^0.57.0",
"unplugin-vue-components": "^0.25.0", "unplugin-vue-components": "^0.25.0",
"vite": "^4.3.9", "vite": "^4.3.9",
"vite-plugin-pwa": "^0.16.0", "vite-plugin-pwa": "^0.17.0",
"vitepress": "1.0.0-rc.25", "vitepress": "1.0.0-rc.29",
"workbox-window": "^7.0.0" "workbox-window": "^7.0.0"
} }
} }

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

@@ -89,7 +89,7 @@ describe('when using mermaid and ', () => {
).resolves.not.toThrow(); ).resolves.not.toThrow();
// should still render, even if lazyLoadedDiagrams fails // should still render, even if lazyLoadedDiagrams fails
expect(mermaidAPI.render).toHaveBeenCalled(); expect(mermaidAPI.render).toHaveBeenCalled();
}); }, 20_000);
it('should defer diagram load based on parameter', async () => { it('should defer diagram load based on parameter', async () => {
let loaded = false; let loaded = false;

1040
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff