mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-23 17:29:54 +02:00
Merge branch 'mermaid-js:develop' into fix/RequirementDiagramOverflow
This commit is contained in:
Michael Krause
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mermaid",
|
||||
"version": "10.7.0",
|
||||
"version": "10.8.0",
|
||||
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"type": "module",
|
||||
"module": "./dist/mermaid.core.mjs",
|
||||
|
||||
@@ -122,7 +122,10 @@ function setBlockSizes(block: Block, db: BlockDB, siblingWidth = 0, siblingHeigh
|
||||
}
|
||||
|
||||
const columns = block.columns || -1;
|
||||
const numItems = block.children.length;
|
||||
let numItems = 0;
|
||||
for (const child of block.children) {
|
||||
numItems += child.widthInColumns || 1;
|
||||
}
|
||||
|
||||
// The width and height in number blocks
|
||||
let xSize = block.children.length;
|
||||
|
||||
@@ -11,6 +11,7 @@ export interface RectData {
|
||||
ry?: number;
|
||||
attrs?: Record<string, string | number>;
|
||||
anchor?: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export interface Bound {
|
||||
|
||||
@@ -21,6 +21,9 @@ export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElemen
|
||||
rectElement.attr('stroke', rectData.stroke);
|
||||
rectElement.attr('width', rectData.width);
|
||||
rectElement.attr('height', rectData.height);
|
||||
if (rectData.name) {
|
||||
rectElement.attr('name', rectData.name);
|
||||
}
|
||||
rectData.rx !== undefined && rectElement.attr('rx', rectData.rx);
|
||||
rectData.ry !== undefined && rectElement.attr('ry', rectData.ry);
|
||||
|
||||
|
||||
@@ -256,32 +256,25 @@ const getStartDate = function (prevTime, dateFormat, str) {
|
||||
str = str.trim();
|
||||
|
||||
// Test for after
|
||||
const re = /^after\s+([\d\w- ]+)/;
|
||||
const afterStatement = re.exec(str.trim());
|
||||
const afterRePattern = /^after\s+(?<ids>[\d\w- ]+)/;
|
||||
const afterStatement = afterRePattern.exec(str);
|
||||
|
||||
if (afterStatement !== null) {
|
||||
// check all after ids and take the latest
|
||||
let latestEndingTask = null;
|
||||
afterStatement[1].split(' ').forEach(function (id) {
|
||||
let latestTask = null;
|
||||
for (const id of afterStatement.groups.ids.split(' ')) {
|
||||
let task = findTaskById(id);
|
||||
if (task !== undefined) {
|
||||
if (!latestEndingTask) {
|
||||
latestEndingTask = task;
|
||||
} else {
|
||||
if (task.endTime > latestEndingTask.endTime) {
|
||||
latestEndingTask = task;
|
||||
}
|
||||
}
|
||||
if (task !== undefined && (!latestTask || task.endTime > latestTask.endTime)) {
|
||||
latestTask = task;
|
||||
}
|
||||
});
|
||||
|
||||
if (!latestEndingTask) {
|
||||
const dt = new Date();
|
||||
dt.setHours(0, 0, 0, 0);
|
||||
return dt;
|
||||
} else {
|
||||
return latestEndingTask.endTime;
|
||||
}
|
||||
|
||||
if (latestTask) {
|
||||
return latestTask.endTime;
|
||||
}
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
return today;
|
||||
}
|
||||
|
||||
// Check for actual date set
|
||||
@@ -344,13 +337,35 @@ const parseDuration = function (str) {
|
||||
const getEndDate = function (prevTime, dateFormat, str, inclusive = false) {
|
||||
str = str.trim();
|
||||
|
||||
// Check for actual date
|
||||
let mDate = dayjs(str, dateFormat.trim(), true);
|
||||
if (mDate.isValid()) {
|
||||
if (inclusive) {
|
||||
mDate = mDate.add(1, 'd');
|
||||
// test for until
|
||||
const untilRePattern = /^until\s+(?<ids>[\d\w- ]+)/;
|
||||
const untilStatement = untilRePattern.exec(str);
|
||||
|
||||
if (untilStatement !== null) {
|
||||
// check all until ids and take the earliest
|
||||
let earliestTask = null;
|
||||
for (const id of untilStatement.groups.ids.split(' ')) {
|
||||
let task = findTaskById(id);
|
||||
if (task !== undefined && (!earliestTask || task.startTime < earliestTask.startTime)) {
|
||||
earliestTask = task;
|
||||
}
|
||||
}
|
||||
return mDate.toDate();
|
||||
|
||||
if (earliestTask) {
|
||||
return earliestTask.startTime;
|
||||
}
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
return today;
|
||||
}
|
||||
|
||||
// check for actual date
|
||||
let parsedDate = dayjs(str, dateFormat.trim(), true);
|
||||
if (parsedDate.isValid()) {
|
||||
if (inclusive) {
|
||||
parsedDate = parsedDate.add(1, 'd');
|
||||
}
|
||||
return parsedDate.toDate();
|
||||
}
|
||||
|
||||
let endTime = dayjs(prevTime);
|
||||
|
||||
@@ -140,10 +140,10 @@ describe('when using the ganttDb', function () {
|
||||
|
||||
it('should handle relative start date based on id regardless of sections', function () {
|
||||
ganttDb.setDateFormat('YYYY-MM-DD');
|
||||
ganttDb.addSection('testa1');
|
||||
ganttDb.addSection('sec1');
|
||||
ganttDb.addTask('test1', 'id1,2013-01-01,2w');
|
||||
ganttDb.addTask('test2', 'id2,after id3,1d');
|
||||
ganttDb.addSection('testa2');
|
||||
ganttDb.addSection('sec2');
|
||||
ganttDb.addTask('test3', 'id3,after id1,2d');
|
||||
|
||||
const tasks = ganttDb.getTasks();
|
||||
@@ -158,6 +158,58 @@ describe('when using the ganttDb', function () {
|
||||
expect(tasks[2].startTime).toEqual(new Date(2013, 0, 15));
|
||||
expect(tasks[2].endTime).toEqual(new Date(2013, 0, 17));
|
||||
});
|
||||
|
||||
it('should handle relative end date based on id regardless of sections', function () {
|
||||
ganttDb.setDateFormat('YYYY-MM-DD');
|
||||
ganttDb.addSection('sec1');
|
||||
ganttDb.addTask('task1', 'id1,2013-01-01,until id3');
|
||||
ganttDb.addSection('sec2');
|
||||
ganttDb.addTask('task2', 'id2,2013-01-10,until id3');
|
||||
ganttDb.addTask('task3', 'id3,2013-02-01,2d');
|
||||
|
||||
const tasks = ganttDb.getTasks();
|
||||
|
||||
expect(tasks[0].startTime).toEqual(new Date(2013, 0, 1));
|
||||
expect(tasks[0].endTime).toEqual(new Date(2013, 1, 1));
|
||||
expect(tasks[0].id).toEqual('id1');
|
||||
expect(tasks[0].task).toEqual('task1');
|
||||
|
||||
expect(tasks[1].id).toEqual('id2');
|
||||
expect(tasks[1].task).toEqual('task2');
|
||||
expect(tasks[1].startTime).toEqual(new Date(2013, 0, 10));
|
||||
expect(tasks[1].endTime).toEqual(new Date(2013, 1, 1));
|
||||
});
|
||||
|
||||
it('should handle relative start date based on multiple id', function () {
|
||||
ganttDb.setDateFormat('YYYY-MM-DD');
|
||||
ganttDb.addSection('sec1');
|
||||
ganttDb.addTask('task1', 'id1,after id2 id3 id4,1d');
|
||||
ganttDb.addTask('task2', 'id2,2013-01-01,1d');
|
||||
ganttDb.addTask('task3', 'id3,2013-02-01,3d');
|
||||
ganttDb.addTask('task4', 'id4,2013-02-01,2d');
|
||||
|
||||
const tasks = ganttDb.getTasks();
|
||||
|
||||
expect(tasks[0].endTime).toEqual(new Date(2013, 1, 5));
|
||||
expect(tasks[0].id).toEqual('id1');
|
||||
expect(tasks[0].task).toEqual('task1');
|
||||
});
|
||||
|
||||
it('should handle relative end date based on multiple id', function () {
|
||||
ganttDb.setDateFormat('YYYY-MM-DD');
|
||||
ganttDb.addSection('sec1');
|
||||
ganttDb.addTask('task1', 'id1,2013-01-01,until id2 id3 id4');
|
||||
ganttDb.addTask('task2', 'id2,2013-01-11,1d');
|
||||
ganttDb.addTask('task3', 'id3,2013-02-10,1d');
|
||||
ganttDb.addTask('task4', 'id4,2013-02-12,1d');
|
||||
|
||||
const tasks = ganttDb.getTasks();
|
||||
|
||||
expect(tasks[0].endTime).toEqual(new Date(2013, 0, 11));
|
||||
expect(tasks[0].id).toEqual('id1');
|
||||
expect(tasks[0].task).toEqual('task1');
|
||||
});
|
||||
|
||||
it('should ignore weekends', function () {
|
||||
ganttDb.setDateFormat('YYYY-MM-DD');
|
||||
ganttDb.setExcludes('weekends 2019-02-06,friday');
|
||||
|
||||
@@ -118,6 +118,38 @@ describe('when parsing a gantt diagram it', function () {
|
||||
expect(tasks[0].id).toEqual('des1');
|
||||
expect(tasks[0].task).toEqual('Design jison grammar');
|
||||
});
|
||||
it('should handle a task with start/end time relative to other tasks', function () {
|
||||
const str =
|
||||
'gantt\n' +
|
||||
'dateFormat YYYY-MM-DD\n' +
|
||||
'title Adding gantt diagram functionality to mermaid\n' +
|
||||
'section Documentation\n' +
|
||||
'task A: a, 2024-01-27, 2024-01-28\n' +
|
||||
'task B: b, after a, 2024-01-30\n' +
|
||||
'task C: c, 2024-01-20, until a\n' +
|
||||
'task D: d, after c, until b';
|
||||
|
||||
expect(parserFnConstructor(str)).not.toThrow();
|
||||
|
||||
const tasks = parser.yy.getTasks();
|
||||
|
||||
expect(tasks[0].startTime).toEqual(new Date(2024, 0, 27));
|
||||
expect(tasks[0].endTime).toEqual(new Date(2024, 0, 28));
|
||||
expect(tasks[0].id).toEqual('a');
|
||||
expect(tasks[0].task).toEqual('task A');
|
||||
expect(tasks[1].startTime).toEqual(new Date(2024, 0, 28));
|
||||
expect(tasks[1].endTime).toEqual(new Date(2024, 0, 30));
|
||||
expect(tasks[1].id).toEqual('b');
|
||||
expect(tasks[1].task).toEqual('task B');
|
||||
expect(tasks[2].startTime).toEqual(new Date(2024, 0, 20));
|
||||
expect(tasks[2].endTime).toEqual(new Date(2024, 0, 27));
|
||||
expect(tasks[2].id).toEqual('c');
|
||||
expect(tasks[2].task).toEqual('task C');
|
||||
expect(tasks[3].startTime).toEqual(new Date(2024, 0, 27));
|
||||
expect(tasks[3].endTime).toEqual(new Date(2024, 0, 28));
|
||||
expect(tasks[3].id).toEqual('d');
|
||||
expect(tasks[3].task).toEqual('task D');
|
||||
});
|
||||
it.each(convert`
|
||||
tags | milestone | done | crit | active
|
||||
${'milestone'} | ${true} | ${false} | ${false} | ${false}
|
||||
|
||||
@@ -456,6 +456,10 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
|
||||
let radius = 0;
|
||||
let offset = 0;
|
||||
let colorClassNum = branchPos[commitB.branch].index;
|
||||
if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
}
|
||||
|
||||
let lineDef;
|
||||
if (arrowNeedsRerouting) {
|
||||
arc = 'A 10 10, 0, 0, 0,';
|
||||
@@ -470,7 +474,6 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
|
||||
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} ${
|
||||
p1.y + offset
|
||||
} L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
|
||||
@@ -486,7 +489,6 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
|
||||
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} ${
|
||||
p1.x + offset
|
||||
} ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
|
||||
@@ -500,19 +502,22 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
|
||||
}
|
||||
}
|
||||
} else {
|
||||
arc = 'A 20 20, 0, 0, 0,';
|
||||
arc2 = 'A 20 20, 0, 0, 1,';
|
||||
radius = 20;
|
||||
offset = 20;
|
||||
|
||||
if (dir === 'TB') {
|
||||
if (p1.x < p2.x) {
|
||||
arc = 'A 20 20, 0, 0, 0,';
|
||||
arc2 = 'A 20 20, 0, 0, 1,';
|
||||
radius = 20;
|
||||
offset = 20;
|
||||
|
||||
// Figure out the color of the arrow,arrows going down take the color from the destination branch
|
||||
colorClassNum = branchPos[commitB.branch].index;
|
||||
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
|
||||
p1.y + offset
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${
|
||||
p2.y
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
} else {
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
|
||||
p1.y + offset
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
}
|
||||
}
|
||||
if (p1.x > p2.x) {
|
||||
arc = 'A 20 20, 0, 0, 0,';
|
||||
@@ -520,46 +525,46 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
|
||||
radius = 20;
|
||||
offset = 20;
|
||||
|
||||
// Arrows going up take the color from the source branch
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
|
||||
p2.y
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
|
||||
p2.y
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
} else {
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p2.x + radius} ${p1.y} ${arc} ${p2.x} ${
|
||||
p1.y + offset
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (p1.x === p2.x) {
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${
|
||||
p2.y + radius
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y}`;
|
||||
}
|
||||
} else {
|
||||
if (p1.y < p2.y) {
|
||||
arc = 'A 20 20, 0, 0, 0,';
|
||||
radius = 20;
|
||||
offset = 20;
|
||||
// Arrows going up take the color from the target branch
|
||||
colorClassNum = branchPos[commitB.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
|
||||
p2.x
|
||||
} ${p2.y}`;
|
||||
if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
|
||||
p1.y + offset
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
} else {
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${
|
||||
p2.y
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
}
|
||||
}
|
||||
if (p1.y > p2.y) {
|
||||
arc = 'A 20 20, 0, 0, 0,';
|
||||
radius = 20;
|
||||
offset = 20;
|
||||
// Arrows going up take the color from the source branch
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
|
||||
p2.x
|
||||
} ${p2.y}`;
|
||||
if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${
|
||||
p1.y - offset
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
} else {
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y + radius} ${arc2} ${p1.x + offset} ${
|
||||
p2.y
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (p1.y === p2.y) {
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
|
||||
p2.x
|
||||
} ${p2.y}`;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -375,6 +375,7 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) {
|
||||
rect.class = cssclass;
|
||||
rect.rx = 3;
|
||||
rect.ry = 3;
|
||||
rect.name = actor.name;
|
||||
const rectElem = drawRect(g, rect);
|
||||
actor.rectData = rect;
|
||||
|
||||
@@ -439,6 +440,7 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
|
||||
cssClass += ` ${TOP_ACTOR_CLASS}`;
|
||||
}
|
||||
actElem.attr('class', cssClass);
|
||||
actElem.attr('name', actor.name);
|
||||
|
||||
const rect = svgDrawCommon.getNoteRect();
|
||||
rect.x = actor.x;
|
||||
|
||||
@@ -371,9 +371,9 @@ If the users have no way to know that things have changed, then you haven't real
|
||||
Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused.
|
||||
|
||||
The documentation has to be updated for users to know that things have been changed and added!
|
||||
If you are adding a new feature, add `(v<MERMAID_RELEASE_VERSION>+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
|
||||
If you are adding a new feature, add `(v10.8.0+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
|
||||
|
||||
eg: `# Feature Name (v<MERMAID_RELEASE_VERSION>+)`
|
||||
eg: `# Feature Name (v10.8.0+)`
|
||||
|
||||
We know it can sometimes be hard to code _and_ write user documentation.
|
||||
|
||||
|
||||
@@ -39,7 +39,7 @@ Where to start:
|
||||
- You could work on a new feature! [These](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Development%22+label%3A%22Type%3A+Enhancement%22+label%3A%22Status%3A+Approved%22+) are some ideas!
|
||||
- You could confirm the bugs in [these issues](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Status%3A+Triage%22++label%3A%22Type%3A+Bug+%2F+Error%22).
|
||||
|
||||
[Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
||||
[You can join our Discord server if you want closer contact!](https://discord.gg/AgrbSrBer3)
|
||||
|
||||
## A Question Or a Suggestion?
|
||||
|
||||
@@ -53,6 +53,6 @@ If you have faced a vulnerability [report it to us](./security.md).
|
||||
|
||||
Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
|
||||
|
||||
[Join our Slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
||||
[You can join our Discord server if you want closer contact!](https://discord.gg/AgrbSrBer3)
|
||||
|
||||
|
||||
|
||||
@@ -212,23 +212,24 @@ Communication tools and platforms
|
||||
|
||||
### Browser Extensions
|
||||
|
||||
| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository |
|
||||
| ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension) |
|
||||
| Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | - |
|
||||
| Diagram Tab | - | - | - | - | [🐙🔗](https://github.com/khafast/diagramtab) |
|
||||
| Markdown Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
|
||||
| Markdown Viewer | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer) |
|
||||
| Extensions for Mermaid | - | - | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) |
|
||||
| Chrome Diagrammer | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - | - | - | - |
|
||||
| Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - |
|
||||
| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
|
||||
| Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - |
|
||||
| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository |
|
||||
| ------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension) |
|
||||
| Asciidoctor Live Preview | [🎡🔗](https://chromewebstore.google.com/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | - |
|
||||
| Diagram Tab | - | - | - | - | [🐙🔗](https://github.com/khafast/diagramtab) |
|
||||
| Markdown Diagrams | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
|
||||
| Markdown Viewer | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer) |
|
||||
| Extensions for Mermaid | - | - | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) |
|
||||
| Chrome Diagrammer | [🎡🔗](https://chromewebstore.google.com/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - | - | - | - |
|
||||
| Mermaid Diagrams | [🎡🔗](https://chromewebstore.google.com/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - |
|
||||
| Monkeys | [🎡🔗](https://chromewebstore.google.com/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
|
||||
| Mermaid Previewer | [🎡🔗](https://chromewebstore.google.com/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - |
|
||||
|
||||
### Other
|
||||
|
||||
- [Bisheng](https://www.npmjs.com/package/bisheng)
|
||||
- [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
|
||||
- [Blazorade Mermaid: Render Mermaid diagrams in Blazor applications](https://github.com/Blazorade/Blazorade-Mermaid/wiki)
|
||||
- [Codemia: A tool to practice system design problems](https://codemia.io) ✅
|
||||
- [ExDoc](https://github.com/elixir-lang/ex_doc)
|
||||
- [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
|
||||
@@ -245,5 +246,5 @@ Communication tools and platforms
|
||||
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
|
||||
- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
|
||||
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
|
||||
- [ExDoc](https://github.com/elixir-lang/ex_doc)
|
||||
- [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
|
||||
|
||||
<!--- cspell:ignore Blazorade --->
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
"devDependencies": {
|
||||
"@iconify-json/carbon": "^1.1.16",
|
||||
"@unocss/reset": "^0.58.0",
|
||||
"@vite-pwa/vitepress": "^0.3.0",
|
||||
"@vite-pwa/vitepress": "^0.4.0",
|
||||
"@vitejs/plugin-vue": "^4.2.1",
|
||||
"fast-glob": "^3.2.12",
|
||||
"https-localhost": "^4.7.1",
|
||||
@@ -31,7 +31,7 @@
|
||||
"unocss": "^0.58.0",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^4.5.2",
|
||||
"vite-plugin-pwa": "^0.18.0",
|
||||
"vite-plugin-pwa": "^0.19.0",
|
||||
"vitepress": "1.0.0-rc.42",
|
||||
"workbox-window": "^7.0.0"
|
||||
}
|
||||
|
||||
@@ -49,8 +49,8 @@ gantt
|
||||
Create tests for parser :crit, active, 3d
|
||||
Future task in critical line :crit, 5d
|
||||
Create tests for renderer :2d
|
||||
Add to mermaid :1d
|
||||
Functionality added :milestone, 2014-01-25, 0d
|
||||
Add to mermaid :until isadded
|
||||
Functionality added :milestone, isadded, 2014-01-25, 0d
|
||||
|
||||
section Documentation
|
||||
Describe gantt syntax :active, a1, after des1, 3d
|
||||
@@ -73,18 +73,27 @@ After processing the tags, the remaining metadata items are interpreted as follo
|
||||
2. If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
|
||||
3. If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later <taskID>` syntax.
|
||||
|
||||
| Metadata syntax | Start date | End date | ID |
|
||||
| ------------------------------------------ | --------------------------------------------------- | ------------------------------------------- | -------- |
|
||||
| `<taskID>, <startDate>, <endDate>` | `startdate` as interpreted using `dateformat` | `endDate` as interpreted using `dateformat` | `taskID` |
|
||||
| `<taskID>, <startDate>, <length>` | `startdate` as interpreted using `dateformat` | Start date + `length` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, <endDate>` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, <length>` | End date of previously specified task `otherTaskID` | Start date + `length` | `taskID` |
|
||||
| `<startDate>, <endDate>` | `startdate` as interpreted using `dateformat` | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `<startDate>, <length>` | `startdate` as interpreted using `dateformat` | Start date + `length` | n/a |
|
||||
| `after <otherTaskID>, <endDate>` | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `after <otherTaskID>, <length>` | End date of previously specified task `otherTaskID` | Start date + `length` | n/a |
|
||||
| `<endDate>` | End date of preceding task | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `<length>` | End date of preceding task | Start date + `length` | n/a |
|
||||
| Metadata syntax | Start date | End date | ID |
|
||||
| ---------------------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | -------- |
|
||||
| `<taskID>, <startDate>, <endDate>` | `startdate` as interpreted using `dateformat` | `endDate` as interpreted using `dateformat` | `taskID` |
|
||||
| `<taskID>, <startDate>, <length>` | `startdate` as interpreted using `dateformat` | Start date + `length` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, <endDate>` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, <length>` | End date of previously specified task `otherTaskID` | Start date + `length` | `taskID` |
|
||||
| `<taskID>, <startDate>, until <otherTaskId>` | `startdate` as interpreted using `dateformat` | Start date of previously specified task `otherTaskID` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, until <otherTaskId>` | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | `taskID` |
|
||||
| `<startDate>, <endDate>` | `startdate` as interpreted using `dateformat` | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `<startDate>, <length>` | `startdate` as interpreted using `dateformat` | Start date + `length` | n/a |
|
||||
| `after <otherTaskID>, <endDate>` | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `after <otherTaskID>, <length>` | End date of previously specified task `otherTaskID` | Start date + `length` | n/a |
|
||||
| `<startDate>, until <otherTaskId>` | `startdate` as interpreted using `dateformat` | Start date of previously specified task `otherTaskID` | n/a |
|
||||
| `after <otherTaskId>, until <otherTaskId>` | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | n/a |
|
||||
| `<endDate>` | End date of preceding task | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `<length>` | End date of preceding task | Start date + `length` | n/a |
|
||||
| `until <otherTaskId>` | End date of preceding task | Start date of previously specified task `otherTaskID` | n/a |
|
||||
|
||||
```note
|
||||
Support for keyword `until` was added in (v<MERMAID_RELEASE_VERSION>+). This can be used to define a task which is running until some other specific task or milestone starts.
|
||||
```
|
||||
|
||||
For simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it's interpreted:
|
||||
|
||||
@@ -93,6 +102,7 @@ gantt
|
||||
apple :a, 2017-07-20, 1w
|
||||
banana :crit, b, 2017-07-23, 1d
|
||||
cherry :active, c, after b a, 1d
|
||||
kiwi :d, 2017-07-20, until b c
|
||||
```
|
||||
|
||||
### Title
|
||||
@@ -221,7 +231,7 @@ gantt
|
||||
```
|
||||
|
||||
```warning
|
||||
`millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION
|
||||
`millisecond` and `second` support was added in v10.3.0
|
||||
```
|
||||
|
||||
## Output in compact mode
|
||||
@@ -439,3 +449,5 @@ gantt
|
||||
section Issue1300
|
||||
5 : 0, 5
|
||||
```
|
||||
|
||||
<!--- cspell:ignore isadded --->
|
||||
|
||||
@@ -277,6 +277,7 @@ In Mermaid, you have the option to configure the gitgraph diagram. You can confi
|
||||
- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram.
|
||||
- `mainBranchName` : String, default is `main`. The name of the default/root branch.
|
||||
- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order.
|
||||
- `parallelCommits`: Boolean, default is `false`. If set to `true`, commits x distance away from the parent are shown at the same level in the diagram.
|
||||
|
||||
Let's look at them one by one.
|
||||
|
||||
@@ -568,6 +569,46 @@ Usage example:
|
||||
commit
|
||||
```
|
||||
|
||||
## Parallel commits (v10.8.0+)
|
||||
|
||||
Commits in Mermaid display temporal information in gitgraph by default. For example if two commits are one commit away from its parent, the commit that was made earlier is rendered closer to its parent. You can turn this off by enabling the `parallelCommits` flag.
|
||||
|
||||
### Temporal Commits (default, `parallelCommits: false`)
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
gitGraph:
|
||||
parallelCommits: false
|
||||
---
|
||||
gitGraph:
|
||||
commit
|
||||
branch develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
commit
|
||||
```
|
||||
|
||||
### Parallel commits (`parallelCommits: true`)
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
gitGraph:
|
||||
parallelCommits: true
|
||||
---
|
||||
gitGraph:
|
||||
commit
|
||||
branch develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
commit
|
||||
```
|
||||
|
||||
## 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).
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
> Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.
|
||||
|
||||
"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life." Wikipedia
|
||||
"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life" [(Wikipedia)](https://en.wikipedia.org/wiki/Timeline).
|
||||
|
||||
### An example of a timeline.
|
||||
### An example of a timeline
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
@@ -42,7 +42,7 @@ or
|
||||
: {event}
|
||||
```
|
||||
|
||||
NOTE: Both time period and event are simple text, and not limited to numbers.
|
||||
**NOTE**: Both time period and event are simple text, and not limited to numbers.
|
||||
|
||||
Let us look at the syntax for the example above.
|
||||
|
||||
@@ -79,7 +79,7 @@ timeline
|
||||
Industry 3.0 : Electronics, Computers, Automation
|
||||
section 21st century
|
||||
Industry 4.0 : Internet, Robotics, Internet of Things
|
||||
Industry 5.0 : Artificial intelligence, Big data,3D printing
|
||||
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.
|
||||
@@ -139,7 +139,7 @@ However, if there is no section defined, then we have two possibilities:
|
||||
|
||||
```
|
||||
|
||||
Note that there are no sections defined, and each time period and its corresponding events will have its own color scheme.
|
||||
**NOTE**: that there are no sections 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.
|
||||
|
||||
@@ -177,7 +177,7 @@ In case you have more than 12 sections, the color scheme will start to repeat.
|
||||
|
||||
If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables.
|
||||
|
||||
NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
|
||||
**NOTE**: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
|
||||
|
||||
Example:
|
||||
|
||||
@@ -293,7 +293,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
## Integrating with your library/website.
|
||||
## Integrating with your library/website
|
||||
|
||||
Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user