diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts
index c748b54d3c..832feaa682 100644
--- a/cypress/integration/rendering/timeline.spec.ts
+++ b/cypress/integration/rendering/timeline.spec.ts
@@ -161,4 +161,20 @@ describe('Timeline diagram', () => {
{}
);
});
+
+ it('11: should render with colons in the sections, period, and events', () => {
+ imgSnapshotTest(
+ `timeline
+ title England's History Timeline
+ section ESC_COLONStESC_COLONone AgeESC_COLON
+ ESC_COLON760ESC_COLON0 BCESC_COLON : BritESC_COLONain's oldest known hoESC_COLONuse was built in Orkney, ScotlandESC_COLON
+ 6000 BC : Sea levels rise and Britain becomes an island.
The people who live here are hunter-gatherers.
+ section ESC_COLONBroESC_COLONze AgeESC_COLON
+ 2300 BC : People arrive from Europe and settle in Britain.
They bring farming and metalworking. : ESC_COLONNew styles of potterESC_COLONy and ways of burying the dead appear.ESC_COLON
+ 2200 BC : The last major building works are completed at Stonehenge.
People now bury their dead in stone circles.
+ : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
+ `,
+ {}
+ );
+ });
});
diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md
index 3d476c41d2..d46ecace1d 100644
--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -58,7 +58,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. You also cannot use `:` characters on their own in the title, time period, section, or event elements because they are used as tokens by the parser. If you want to have a token in your text use `ESC_COLON`. This will be transformed into a `:` when rendered (this will not work for titles).
Let us look at the syntax for the example above.
diff --git a/packages/mermaid/src/diagrams/timeline/svgDraw.js b/packages/mermaid/src/diagrams/timeline/svgDraw.js
index 874ac62ef0..ca110bcfd2 100644
--- a/packages/mermaid/src/diagrams/timeline/svgDraw.js
+++ b/packages/mermaid/src/diagrams/timeline/svgDraw.js
@@ -130,7 +130,7 @@ export const drawCircle = function (element, circleData) {
export const drawText = function (elem, textData) {
// Remove and ignore br:s
- const nText = textData.text.replace(/
/gi, ' ');
+ const nText = replaceEscapedColon(textData.text.replace(/
/gi, ' '));
const textElem = elem.append('text');
textElem.attr('x', textData.x);
@@ -526,12 +526,13 @@ export const drawNode = function (elem, node, fullSection, conf) {
const txt = textElem
.append('text')
- .text(node.descr)
+ .text(replaceEscapedColon(node.descr))
.attr('dy', '1em')
.attr('alignment-baseline', 'middle')
.attr('dominant-baseline', 'middle')
.attr('text-anchor', 'middle')
.call(wrap, node.width);
+
const bbox = txt.node().getBBox();
const fontSize =
conf.fontSize && conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
@@ -586,6 +587,15 @@ const defaultBkg = function (elem, node, section) {
.attr('y2', node.height);
};
+/**
+ * Replaces "\ESCAPE_COLON" with a regular colon in the provided text.
+ * @param {string} text - The text to be modified.
+ * @returns {string} - The text with "\ESCAPE_COLON" replaced with ":".
+ */
+function replaceEscapedColon(text) {
+ return text.replace(/ESC_COLON/g, ':');
+}
+
export default {
drawRect,
drawCircle,
diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
index 165fd62607..acb5e9fb52 100644
--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -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. You also cannot use `:` characters on their own in the title, time period, section, or event elements because they are used as tokens by the parser. If you want to have a token in your text use `ESC_COLON`. This will be transformed into a `:` when rendered (this will not work for titles).
Let us look at the syntax for the example above.