diff --git a/.vite/build.ts b/.vite/build.ts
index 268db3270..183158288 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -3,6 +3,7 @@ import { resolve } from 'path';
import { fileURLToPath } from 'url';
import jisonPlugin from './jisonPlugin.js';
import { readFileSync } from 'fs';
+import typescript from '@rollup/plugin-typescript';
import { visualizer } from 'rollup-plugin-visualizer';
import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
@@ -102,9 +103,14 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
},
},
resolve: {
- extensions: ['.jison', '.js', '.ts', '.json'],
+ extensions: [],
},
- plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
+ plugins: [
+ jisonPlugin(),
+ // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
+ typescript({ compilerOptions: { declaration: false } }),
+ ...visualizerOptions(packageName, core),
+ ],
};
if (watch && config.build) {
diff --git a/README.md b/README.md
index d42e2f7e1..31c6d62c6 100644
--- a/README.md
+++ b/README.md
@@ -226,6 +226,44 @@ pie
### Git graph [experimental - live editor]
+### Bar chart (using gantt chart) [docs - live editor]
+
+```
+gantt
+ title Git Issues - days since last update
+ dateFormat X
+ axisFormat %s
+
+ section Issue19062
+ 71 : 0, 71
+ section Issue19401
+ 36 : 0, 36
+ section Issue193
+ 34 : 0, 34
+ section Issue7441
+ 9 : 0, 9
+ section Issue1300
+ 5 : 0, 5
+```
+
+```mermaid
+gantt
+ title Git Issues - days since last update
+ dateFormat X
+ axisFormat %s
+
+ section Issue19062
+ 71 : 0, 71
+ section Issue19401
+ 36 : 0, 36
+ section Issue193
+ 34 : 0, 34
+ section Issue7441
+ 9 : 0, 9
+ section Issue1300
+ 5 : 0, 5
+```
+
### User Journey diagram [docs - live editor]
```
diff --git a/__mocks__/d3.ts b/__mocks__/d3.ts
index af35020c5..b472a3181 100644
--- a/__mocks__/d3.ts
+++ b/__mocks__/d3.ts
@@ -1,5 +1,5 @@
// @ts-nocheck TODO: Fix TS
-import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3';
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
export const select = function () {
return new MockedD3();
diff --git a/cSpell.json b/cSpell.json
index d860c5e33..94276b683 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -47,6 +47,7 @@
"graphviz",
"grav",
"greywolf",
+ "huynh",
"inkdrop",
"jaoude",
"jison",
@@ -90,6 +91,7 @@
"sidharthv",
"sphinxcontrib",
"statediagram",
+ "steph",
"stylis",
"substate",
"sveidqvist",
diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js
index 513cf0714..6df7edd84 100644
--- a/cypress/integration/other/configuration.spec.js
+++ b/cypress/integration/other/configuration.spec.js
@@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util';
+import { renderGraph } from '../../helpers/util.js';
describe('Configuration', () => {
describe('arrowMarkerAbsolute', () => {
it('should handle default value false of arrowMarkerAbsolute', () => {
diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js
index c94235162..4ade11e81 100644
--- a/cypress/integration/other/external-diagrams.spec.js
+++ b/cypress/integration/other/external-diagrams.spec.js
@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util';
+import { urlSnapshotTest } from '../../helpers/util.js';
describe('mermaid', () => {
describe('registerDiagram', () => {
diff --git a/cypress/integration/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js
index 4fadc7855..8f28d9f53 100644
--- a/cypress/integration/other/ghsa.spec.js
+++ b/cypress/integration/other/ghsa.spec.js
@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util';
+import { urlSnapshotTest } from '../../helpers/util.js';
describe('CSS injections', () => {
it('should not allow CSS injections outside of the diagram', () => {
diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
index 71810cfa4..a11571814 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
describe('Class diagram V2', () => {
it('0: should render a simple class diagram', () => {
imgSnapshotTest(
diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index e21be67ec..cda455f0e 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Class diagram', () => {
it('1: should render a simple class diagram', () => {
diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js
index 033752c66..e0b36d53a 100644
--- a/cypress/integration/rendering/current.spec.js
+++ b/cypress/integration/rendering/current.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
describe('Current diagram', () => {
it('should render a state with states in it', () => {
diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/integration/rendering/debug.spec.js
index 673cadf3e..afde4af3e 100644
--- a/cypress/integration/rendering/debug.spec.js
+++ b/cypress/integration/rendering/debug.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
describe('Flowchart', () => {
it('34: testing the label width in percy', () => {
diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index faa511626..0c6eaa838 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Entity Relationship Diagram', () => {
it('should render a simple ER diagram', () => {
diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js
index 68d8b3ce5..d0ef42c5d 100644
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe.skip('Flowchart ELK', () => {
it('1-elk: should render a simple flowchart', () => {
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 4513cc87d..eaa14ed50 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Flowchart v2', () => {
it('1: should render a simple flowchart', () => {
@@ -685,6 +685,16 @@ A ~~~ B
{ titleTopMargin: 0 }
);
});
+ it('4023: Should render html labels with images and-or text correctly', () => {
+ imgSnapshotTest(
+ `flowchart TD
+ B[]
+ B-->C[ more text ]
+ B-->D( some text)
+ B-->E(plain)`,
+ {}
+ );
+ });
describe('Markdown strings flowchart (#4220)', () => {
describe('html labels', () => {
it('With styling and classes', () => {
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index c4ef54fcf..d25043d28 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Graph', () => {
it('1: should render a simple flowchart no htmlLabels', () => {
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index f8948240a..687fc245b 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -1,6 +1,6 @@
///
` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.** +**Doing so commands the mermaid parser to look for the `` or `` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.** -**Examples can be found at** [Other examples](../syntax/examples.md) +**Examples can be found in** [Other examples](../syntax/examples.md) ## Sibling projects diff --git a/docs/news/announcements.md b/docs/news/announcements.md new file mode 100644 index 000000000..112bde52c --- /dev/null +++ b/docs/news/announcements.md @@ -0,0 +1,13 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/news/announcements.md](../../packages/mermaid/src/docs/news/announcements.md). + +# Announcements + +## [Automatic text wrapping in flowcharts is here!](https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here) + +3 April 2023 · 3 mins + +Markdown Strings reduce the hassle # Starting from v10. diff --git a/docs/news/blog.md b/docs/news/blog.md new file mode 100644 index 000000000..dc6f3f635 --- /dev/null +++ b/docs/news/blog.md @@ -0,0 +1,31 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/news/blog.md](../../packages/mermaid/src/docs/news/blog.md). + +# Blog + +## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/) + +27 March 2023 · 2 mins + +Exciting news for all Mermaid OSS fans: Mermaid Chart has officially launched with Mermaid Chart! + +## [If you're not excited about ChatGPT, then you're not being creative](https://www.mermaidchart.com/blog/posts/if-youre-not-excited-about-chatgpt-then-youre-not-being-creative-enough/) + +8 March 2023 · 9 mins + +The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the trough of disillusionment. + +## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://www.mermaidchart.com/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/) + +1 March 2023 · 12 mins + +Flowchart design is a game of balance: Read about the importance of dialling in the right level of detail and how to manage complexity in large flowcharts. + +## [Busting the myth that developers can't write](https://www.mermaidchart.com/blog/posts/busting-the-myth-that-developers-cant-write/) + +10 February 2023 · 10 mins + +Busting the myth that developers can’t write # It’s an annoying stereotype that developers don’t know how to write, speak, and otherwise communicate. diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico index d41818c5b..05d8a737b 100644 Binary files a/docs/public/favicon.ico and b/docs/public/favicon.ico differ diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index c79f12b23..6f5b973e8 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -710,6 +710,44 @@ flowchart LR B1 --> B2 ``` +## Markdown Strings + +The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels. + +```mermaid-example +%%{init: {"flowchart": {"htmlLabels": false}} }%% +flowchart LR +subgraph "One" + a("`The **cat** + in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}} +end +subgraph "`**Two**`" + c("`The **cat** + in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog") +end +``` + +```mermaid +%%{init: {"flowchart": {"htmlLabels": false}} }%% +flowchart LR +subgraph "One" + a("`The **cat** + in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}} +end +subgraph "`**Two**`" + c("`The **cat** + in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog") +end +``` + +Formatting: + +- For bold text, use double asterisks \*\* before and after the text. +- For italics, use single asterisks \* before and after the text. +- With traditional strings, you needed to add
tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a
tag. + +This feature is applicable to node labels, edge labels, and subgraph labels. + ## Interaction It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 1b12063d7..091cdeabe 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -464,3 +464,41 @@ Beginner's tip—a full example using interactive links in an html context: