marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-02 13:49:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into 6664-text-going-outside-node

Browse Source
This commit is contained in:
shubham-mermaid
2025-07-09 18:34:15 +05:30
committed by GitHub
parent 9655d07adf dda9c9b46e
commit 6dd9af0dd4
55 changed files with 1035 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/examples/package.json Normal file
View File

@@ -0,0 +1,32 @@
{
"name": "@mermaid-js/examples",
"version": "0.0.1-beta.1",
"description": "Mermaid examples package",
"author": "Sidharth Vinod",
"type": "module",
"module": "./dist/mermaid-examples.core.mjs",
"types": "./dist/mermaid.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/mermaid-examples.core.mjs",
"default": "./dist/mermaid-examples.core.mjs"
}
},
"files": [
"dist"
],
"scripts": {
"clean": "rimraf dist"
},
"dependencies": {},
"devDependencies": {
"mermaid": "workspace:*"
},
"peerDependencies": {
"mermaid": "workspace:~"
},
"publishConfig": {
"access": "public"
}
}

34
packages/examples/src/example.spec.ts Normal file
View File

@@ -0,0 +1,34 @@
import mermaid from 'mermaid';
import { diagramData } from './index.js';
describe('examples', () => {
beforeAll(async () => {
// To trigger the diagram registration
await mermaid.registerExternalDiagrams([]);
});
it('should have examples for each diagrams', () => {
const skippedDiagrams = [
// These diagrams have no examples
'error',
'info',
'---',
// These diagrams have v2 versions, with examples
'class',
'graph',
'flowchart-elk',
'flowchart',
'state',
];
const diagrams = mermaid
.getRegisteredDiagramsMetadata()
.filter((d) => !skippedDiagrams.includes(d.id));
expect(diagrams.length).toBeGreaterThan(0);
for (const diagram of diagrams) {
const data = diagramData.find((d) => d.id === diagram.id)!;
expect(data, `Example for ${diagram.id} is not defined`).toBeDefined();
expect(data.examples.length).toBeGreaterThan(0);
expect(data.examples.filter((e) => e.isDefault).length).toBe(1);
}
});
});

24
packages/examples/src/examples/architecture.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'architecture',
name: 'Architecture Diagram',
description: 'Visualize system architecture and components',
examples: [
{
title: 'Basic System Architecture',
isDefault: true,
code: `architecture-beta
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db`,
},
],
} satisfies DiagramMetadata;

27
packages/examples/src/examples/block.ts Normal file
View File

@@ -0,0 +1,27 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'block',
name: 'Block Diagram',
description: 'Create block-based visualizations with beta styling',
examples: [
{
title: 'Basic Block Layout',
isDefault: true,
code: `block-beta
columns 1
db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#969,stroke:#333,stroke-width:4px`,
},
],
} satisfies DiagramMetadata;

47
packages/examples/src/examples/c4.ts Normal file
View File

@@ -0,0 +1,47 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'c4',
name: 'C4 Diagram',
description:
'Visualize software architecture using the C4 model (Context, Container, Component, Code)',
examples: [
{
title: 'Internet Banking System Context',
isDefault: true,
code: `C4Context
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")`,
},
],
} satisfies DiagramMetadata;

34
packages/examples/src/examples/class.ts Normal file
View File

@@ -0,0 +1,34 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'classDiagram',
name: 'Class Diagram',
description: 'Visualize class structures and relationships in object-oriented programming',
examples: [
{
title: 'Basic Class Inheritance',
isDefault: true,
code: `classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}`,
},
],
} satisfies DiagramMetadata;

36
packages/examples/src/examples/er.ts Normal file
View File

@@ -0,0 +1,36 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'er',
name: 'Entity Relationship Diagram',
description: 'Visualize database schemas and relationships between entities',
examples: [
{
title: 'Basic ER Schema',
isDefault: true,
code: `erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : includes
CUSTOMER {
string id
string name
string email
}
ORDER {
string id
date orderDate
string status
}
PRODUCT {
string id
string name
float price
}
ORDER_ITEM {
int quantity
float price
}`,
},
],
} satisfies DiagramMetadata;

19
packages/examples/src/examples/flowchart.ts Normal file
View File

@@ -0,0 +1,19 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'flowchart-v2',
name: 'Flowchart',
description: 'Visualize flowcharts and directed graphs',
examples: [
{
title: 'Basic Flowchart',
isDefault: true,
code: `flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]`,
},
],
} satisfies DiagramMetadata;

22
packages/examples/src/examples/gantt.ts Normal file
View File

@@ -0,0 +1,22 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'gantt',
name: 'Gantt Chart',
description: 'Visualize project schedules and timelines',
examples: [
{
title: 'Basic Project Timeline',
isDefault: true,
code: `gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d`,
},
],
} satisfies DiagramMetadata;

28
packages/examples/src/examples/git.ts Normal file
View File

@@ -0,0 +1,28 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'gitGraph',
name: 'Git Graph',
description: 'Visualize Git repository history and branch relationships',
examples: [
{
title: 'Basic Git Flow',
isDefault: true,
code: `gitGraph
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature`,
},
],
} satisfies DiagramMetadata;

37
packages/examples/src/examples/kanban.ts Normal file
View File

@@ -0,0 +1,37 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'kanban',
name: 'Kanban Diagram',
description: 'Visualize work items in a Kanban board',
examples: [
{
title: 'Kanban Diagram',
isDefault: true,
code: `---
config:
kanban:
ticketBaseUrl: 'https://github.com/mermaid-js/mermaid/issues/#TICKET#'
---
kanban
Todo
[Create Documentation]
docs[Create Blog about the new diagram]
[In progress]
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
id9[Ready for deploy]
id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for test]
id4[Create parsing tests]@{ ticket: 2038, assigned: 'K.Sveidqvist', priority: 'High' }
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
id11[Done]
id5[define getData]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: 2036, priority: 'Very High'}
id3[Update DB function]@{ ticket: 2037, assigned: knsv, priority: 'High' }
id12[Can't reproduce]
id3[Weird flickering in Firefox]
`,
},
],
} satisfies DiagramMetadata;

32
packages/examples/src/examples/mindmap.ts Normal file
View File

@@ -0,0 +1,32 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'mindmap',
name: 'Mindmap',
description: 'Visualize ideas and concepts in a tree-like structure',
examples: [
{
title: 'Basic Mindmap',
isDefault: true,
code: `mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid`,
},
],
} satisfies DiagramMetadata;
// cspell:ignore Buzan

34
packages/examples/src/examples/packet.ts Normal file
View File

@@ -0,0 +1,34 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'packet',
name: 'Packet Diagram',
description: 'Visualize packet data and network traffic',
examples: [
{
title: 'TCP Packet',
isDefault: true,
code: `---
title: "TCP Packet"
---
packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"`,
},
],
} satisfies DiagramMetadata;

17
packages/examples/src/examples/pie.ts Normal file
View File

@@ -0,0 +1,17 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'pie',
name: 'Pie Chart',
description: 'Visualize data as proportional segments of a circle',
examples: [
{
title: 'Basic Pie Chart',
isDefault: true,
code: `pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15`,
},
],
} satisfies DiagramMetadata;

27
packages/examples/src/examples/quadrant-chart.ts Normal file
View File

@@ -0,0 +1,27 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'quadrantChart',
name: 'Quadrant Chart',
description: 'Visualize items in a 2x2 matrix based on two variables',
examples: [
{
title: 'Product Positioning',
isDefault: true,
code: `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]`,
},
],
} satisfies DiagramMetadata;

25
packages/examples/src/examples/radar.ts Normal file
View File

@@ -0,0 +1,25 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'radar',
name: 'Radar Diagram',
description: 'Visualize data in a radial format',
examples: [
{
title: 'Student Grades',
isDefault: true,
code: `---
title: "Grades"
---
radar-beta
axis m["Math"], s["Science"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0
`,
},
],
} satisfies DiagramMetadata;

27
packages/examples/src/examples/requirement.ts Normal file
View File

@@ -0,0 +1,27 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'requirement',
name: 'Requirement Diagram',
description: 'Visualize system requirements and their relationships',
examples: [
{
title: 'Basic Requirements',
code: `requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req`,
isDefault: true,
},
],
} satisfies DiagramMetadata;

88
packages/examples/src/examples/sankey.ts Normal file
View File

@@ -0,0 +1,88 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'sankey',
name: 'Sankey Diagram',
description: 'Visualize flow quantities between different stages or processes',
examples: [
{
title: 'Energy Flow',
isDefault: true,
code: `---
config:
sankey:
showValues: false
---
sankey-beta
Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,NGas,40.719
Gas reserves,NGas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
NGas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366`,
},
],
} satisfies DiagramMetadata;

18
packages/examples/src/examples/sequence.ts Normal file
View File

@@ -0,0 +1,18 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'sequence',
name: 'Sequence Diagram',
description: 'Visualize interactions between objects over time',
examples: [
{
title: 'Basic Sequence',
isDefault: true,
code: `sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!`,
},
],
} satisfies DiagramMetadata;

20
packages/examples/src/examples/state.ts Normal file
View File

@@ -0,0 +1,20 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'stateDiagram',
name: 'State Diagram',
description: 'Visualize the states and transitions of a system',
examples: [
{
title: 'Basic State Diagram',
code: `stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]`,
isDefault: true,
},
],
} satisfies DiagramMetadata;

20
packages/examples/src/examples/timeline.ts Normal file
View File

@@ -0,0 +1,20 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'timeline',
name: 'Timeline Diagram',
description: 'Visualize events and milestones in chronological order',
examples: [
{
title: 'Project Timeline',
isDefault: true,
code: `timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter`,
},
],
} satisfies DiagramMetadata;

21
packages/examples/src/examples/treemap.ts Normal file
View File

@@ -0,0 +1,21 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'treemap',
name: 'Treemap',
description: 'Visualize hierarchical data as nested rectangles',
examples: [
{
title: 'Treemap',
isDefault: true,
code: `treemap-beta
"Section 1"
"Leaf 1.1": 12
"Section 1.2"
"Leaf 1.2.1": 12
"Section 2"
"Leaf 2.1": 20
"Leaf 2.2": 25`,
},
],
} satisfies DiagramMetadata;

22
packages/examples/src/examples/user-journey.ts Normal file
View File

@@ -0,0 +1,22 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'journey',
name: 'User Journey Diagram',
description: 'Visualize user interactions and experiences with a system',
examples: [
{
title: 'My Working Day',
isDefault: true,
code: `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`,
},
],
} satisfies DiagramMetadata;

19
packages/examples/src/examples/xychart.ts Normal file
View File

@@ -0,0 +1,19 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'xychart',
name: 'XY Chart',
description: 'Create scatter plots and line charts with customizable axes',
examples: [
{
title: 'Sales Revenue',
isDefault: true,
code: `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]`,
},
],
} satisfies DiagramMetadata;

48
packages/examples/src/index.ts Normal file
View File

@@ -0,0 +1,48 @@
import type { DiagramMetadata } from './types.js';
import flowChart from './examples/flowchart.js';
import c4 from './examples/c4.js';
import kanban from './examples/kanban.js';
import classDiagram from './examples/class.js';
import sequenceDiagram from './examples/sequence.js';
import pieDiagram from './examples/pie.js';
import userJourneyDiagram from './examples/user-journey.js';
import mindmapDiagram from './examples/mindmap.js';
import requirementDiagram from './examples/requirement.js';
import radarDiagram from './examples/radar.js';
import stateDiagram from './examples/state.js';
import erDiagram from './examples/er.js';
import gitDiagram from './examples/git.js';
import architectureDiagram from './examples/architecture.js';
import xychartDiagram from './examples/xychart.js';
import sankeyDiagram from './examples/sankey.js';
import ganttDiagram from './examples/gantt.js';
import timelineDiagram from './examples/timeline.js';
import quadrantChart from './examples/quadrant-chart.js';
import packetDiagram from './examples/packet.js';
import blockDiagram from './examples/block.js';
import treemapDiagram from './examples/treemap.js';
export const diagramData: DiagramMetadata[] = [
flowChart,
c4,
kanban,
classDiagram,
sequenceDiagram,
pieDiagram,
userJourneyDiagram,
mindmapDiagram,
requirementDiagram,
radarDiagram,
stateDiagram,
erDiagram,
gitDiagram,
architectureDiagram,
xychartDiagram,
sankeyDiagram,
ganttDiagram,
timelineDiagram,
quadrantChart,
packetDiagram,
blockDiagram,
treemapDiagram,
];

12
packages/examples/src/types.ts Normal file
View File

@@ -0,0 +1,12 @@
export interface Example {
title: string;
code: string;
isDefault?: boolean;
}
export interface DiagramMetadata {
id: string;
name: string;
description: string;
examples: Example[];
}

11
packages/examples/tsconfig.json Normal file
View File

@@ -0,0 +1,11 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "./dist",
"rootDir": "./src",
"module": "Node16",
"moduleResolution": "Node16"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}

20
packages/mermaid/CHANGELOG.md
View File

@@ -1,5 +1,25 @@
# mermaid
## 11.8.1
### Patch Changes
- Updated dependencies [[`0da2922`](https://github.com/mermaid-js/mermaid/commit/0da2922ee7f47959e324ec10d3d21ee70594f557)]:
- @mermaid-js/parser@0.6.1
## 11.8.0
### Minor Changes
- [#6590](https://github.com/mermaid-js/mermaid/pull/6590) [`f338802`](https://github.com/mermaid-js/mermaid/commit/f338802642cdecf5b7ed6c19a20cf2a81effbbee) Thanks [@knsv](https://github.com/knsv)! - Adding support for the new diagram type nested treemap
### Patch Changes
- [#6707](https://github.com/mermaid-js/mermaid/pull/6707) [`592c5bb`](https://github.com/mermaid-js/mermaid/commit/592c5bb880c3b942710a2878d386bcb3eb35c137) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Log a warning when duplicate commit IDs are encountered in gitGraph to help identify and debug rendering issues caused by non-unique IDs.
- Updated dependencies [[`f338802`](https://github.com/mermaid-js/mermaid/commit/f338802642cdecf5b7ed6c19a20cf2a81effbbee)]:
- @mermaid-js/parser@0.6.0
## 11.7.0
### Minor Changes

2
packages/mermaid/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "11.7.0",
"version": "11.8.1",
"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",

27
packages/mermaid/src/diagram-api/loadDiagram.ts
View File

@@ -7,20 +7,21 @@ export const loadRegisteredDiagrams = async () => {
// Load all lazy loaded diagrams in parallel
const results = await Promise.allSettled(
Object.entries(detectors).map(async ([key, { detector, loader }]) => {
if (loader) {
if (!loader) {
return;
}
try {
getDiagram(key);
} catch {
try {
getDiagram(key);
} catch {
try {
// Register diagram if it is not already registered
const { diagram, id } = await loader();
registerDiagram(id, diagram, detector);
} catch (err) {
// Remove failed diagram from detectors
log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`);
delete detectors[key];
throw err;
}
// Register diagram if it is not already registered
const { diagram, id } = await loader();
registerDiagram(id, diagram, detector);
} catch (err) {
// Remove failed diagram from detectors
log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`);
delete detectors[key];
throw err;
}
}
})

8
packages/mermaid/src/diagram-api/types.ts
View File

@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import type * as d3 from 'd3';
import type { SetRequired } from 'type-fest';
import type { SetOptional, SetRequired } from 'type-fest';
import type { Diagram } from '../Diagram.js';
import type { BaseDiagramConfig, MermaidConfig } from '../config.type.js';
@@ -91,17 +91,13 @@ export interface DiagramDefinition {
) => void;
}
export interface DetectorRecord {
detector: DiagramDetector;
loader?: DiagramLoader;
}
export interface ExternalDiagramDefinition {
id: string;
detector: DiagramDetector;
loader: DiagramLoader;
}
export type DetectorRecord = SetOptional<Omit<ExternalDiagramDefinition, 'id'>, 'loader'>;
export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
export type DiagramLoader = () => Promise<{ id: string; diagram: DiagramDefinition }>;

10
packages/mermaid/src/docs/community/new-diagram.md
View File

@@ -106,3 +106,13 @@ const themes = {
```
The actual options and values for the colors are defined in **src/theme/theme-[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
## Examples
The `@mermaid-js/examples` package contains a collection of examples that are used by tools like mermaid.live to help users get started with the new diagram.
You can duplicate an existing diagram example file, eg: `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram.
Then you can import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array.
Each diagram should have at least one example, and that should be marked as default. It is good to add more examples to showcase different features of the diagram.

15
packages/mermaid/src/mermaid.ts
View File

@@ -5,7 +5,7 @@
import { registerIconPacks } from './rendering-util/icons.js';
import { dedent } from 'ts-dedent';
import type { MermaidConfig } from './config.type.js';
import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
import { detectType, detectors, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
import { addDiagrams } from './diagram-api/diagram-orchestration.js';
import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
import type { ExternalDiagramDefinition, SVG, SVGGroup } from './diagram-api/types.js';
@@ -415,6 +415,17 @@ const render: typeof mermaidAPI.render = (id, text, container) => {
});
};
/**
* Gets the metadata for all registered diagrams.
* Currently only the id is returned.
* @returns An array of objects with the id of the diagram.
*/
const getRegisteredDiagramsMetadata = (): Pick<ExternalDiagramDefinition, 'id'>[] => {
return Object.keys(detectors).map((id) => ({
id,
}));
};
export interface Mermaid {
startOnLoad: boolean;
parseError?: ParseErrorFunction;
@@ -437,6 +448,7 @@ export interface Mermaid {
setParseErrorHandler: typeof setParseErrorHandler;
detectType: typeof detectType;
registerIconPacks: typeof registerIconPacks;
getRegisteredDiagramsMetadata: typeof getRegisteredDiagramsMetadata;
}
const mermaid: Mermaid = {
@@ -454,6 +466,7 @@ const mermaid: Mermaid = {
setParseErrorHandler,
detectType,
registerIconPacks,
getRegisteredDiagramsMetadata,
};
export default mermaid;

12
packages/parser/CHANGELOG.md
View File

@@ -1,5 +1,17 @@
# @mermaid-js/parser
## 0.6.1
### Patch Changes
- [#6725](https://github.com/mermaid-js/mermaid/pull/6725) [`0da2922`](https://github.com/mermaid-js/mermaid/commit/0da2922ee7f47959e324ec10d3d21ee70594f557) Thanks [@shubham-mermaid](https://github.com/shubham-mermaid)! - chore: use Treemap instead of TreemapDoc in parser.
## 0.6.0
### Minor Changes
- [#6590](https://github.com/mermaid-js/mermaid/pull/6590) [`f338802`](https://github.com/mermaid-js/mermaid/commit/f338802642cdecf5b7ed6c19a20cf2a81effbbee) Thanks [@knsv](https://github.com/knsv)! - Adding support for the new diagram type nested treemap
## 0.5.0
### Minor Changes

2
packages/parser/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@mermaid-js/parser",
"version": "0.5.0",
"version": "0.6.1",
"description": "MermaidJS parser",
"author": "Yokozuna59",
"contributors": [

4
packages/parser/src/language/index.ts
View File

@@ -8,7 +8,7 @@ export {
Architecture,
GitGraph,
Radar,
TreemapDoc,
Treemap,
Branch,
Commit,
Merge,
@@ -20,7 +20,7 @@ export {
isPieSection,
isArchitecture,
isGitGraph,
isTreemapDoc,
isTreemap,
isBranch,
isCommit,
isMerge,

8
packages/parser/src/language/treemap/treemap-validator.ts
View File

@@ -1,5 +1,5 @@
import type { ValidationAcceptor, ValidationChecks } from 'langium';
import type { MermaidAstType, TreemapDoc } from '../generated/ast.js';
import type { MermaidAstType, Treemap } from '../generated/ast.js';
import type { TreemapServices } from './module.js';
/**
@@ -9,10 +9,10 @@ export function registerValidationChecks(services: TreemapServices) {
const validator = services.validation.TreemapValidator;
const registry = services.validation.ValidationRegistry;
if (registry) {
// Use any to bypass type checking since we know TreemapDoc is part of the AST
// Use any to bypass type checking since we know Treemap is part of the AST
// but the type system is having trouble with it
const checks: ValidationChecks<MermaidAstType> = {
TreemapDoc: validator.checkSingleRoot.bind(validator),
Treemap: validator.checkSingleRoot.bind(validator),
// Remove unused validation for TreemapRow
};
registry.register(checks, validator);
@@ -27,7 +27,7 @@ export class TreemapValidator {
* Validates that a treemap has only one root node.
* A root node is defined as a node that has no indentation.
*/
checkSingleRoot(doc: TreemapDoc, accept: ValidationAcceptor): void {
checkSingleRoot(doc: Treemap, accept: ValidationAcceptor): void {
let rootNodeIndentation;
for (const row of doc.TreemapRows) {

4
packages/parser/src/language/treemap/treemap.langium
View File

@@ -34,14 +34,14 @@ interface ClassDefStatement {
className: string
styleText: string // Optional style text
}
interface TreemapDoc {
interface Treemap {
TreemapRows: TreemapRow[]
title?: string
accTitle?: string
accDescr?: string
}
entry TreemapDoc returns TreemapDoc:
entry Treemap returns Treemap:
TREEMAP_KEYWORD
(
TitleAndAccessibilities

20
packages/parser/tests/treemap.test.ts
View File

@@ -1,6 +1,6 @@
import { describe, expect, it } from 'vitest';
import { expectNoErrorsOrAlternatives } from './test-util.js';
import type { TreemapDoc, Section, Leaf, TreemapRow } from '../src/language/generated/ast.js';
import type { Treemap, Section, Leaf, TreemapRow } from '../src/language/generated/ast.js';
import type { LangiumParser } from 'langium';
import { createTreemapServices } from '../src/language/treemap/module.js';
@@ -9,21 +9,21 @@ describe('Treemap Parser', () => {
const parser: LangiumParser = services.parser.LangiumParser;
const parse = (input: string) => {
return parser.parse<TreemapDoc>(input);
return parser.parse<Treemap>(input);
};
describe('Basic Parsing', () => {
it('should parse empty treemap', () => {
const result = parse('treemap');
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe('TreemapDoc');
expect(result.value.$type).toBe('Treemap');
expect(result.value.TreemapRows).toHaveLength(0);
});
it('should parse a section node', () => {
const result = parse('treemap\n"Root"');
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe('TreemapDoc');
expect(result.value.$type).toBe('Treemap');
expect(result.value.TreemapRows).toHaveLength(1);
if (result.value.TreemapRows[0].item) {
expect(result.value.TreemapRows[0].item.$type).toBe('Section');
@@ -39,7 +39,7 @@ describe('Treemap Parser', () => {
"Child2" : 200
`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe('TreemapDoc');
expect(result.value.$type).toBe('Treemap');
expect(result.value.TreemapRows).toHaveLength(3);
if (result.value.TreemapRows[0].item) {
@@ -95,7 +95,7 @@ describe('Treemap Parser', () => {
// We're only checking that the multiple root nodes parse successfully
// The validation errors would be reported by the validator during validation
expect(result.value.$type).toBe('TreemapDoc');
expect(result.value.$type).toBe('Treemap');
expect(result.value.TreemapRows).toHaveLength(2);
});
});
@@ -104,7 +104,7 @@ describe('Treemap Parser', () => {
it('should parse a treemap with title', () => {
const result = parse('treemap\ntitle My Treemap Diagram\n"Root"\n "Child": 100');
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe('TreemapDoc');
expect(result.value.$type).toBe('Treemap');
// We can't directly test the title property due to how Langium processes TitleAndAccessibilities
// but we can verify the TreemapRows are parsed correctly
expect(result.value.TreemapRows).toHaveLength(2);
@@ -113,7 +113,7 @@ describe('Treemap Parser', () => {
it('should parse a treemap with accTitle', () => {
const result = parse('treemap\naccTitle: Accessible Title\n"Root"\n "Child": 100');
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe('TreemapDoc');
expect(result.value.$type).toBe('Treemap');
// We can't directly test the accTitle property due to how Langium processes TitleAndAccessibilities
expect(result.value.TreemapRows).toHaveLength(2);
});
@@ -123,7 +123,7 @@ describe('Treemap Parser', () => {
'treemap\naccDescr: This is an accessible description\n"Root"\n "Child": 100'
);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe('TreemapDoc');
expect(result.value.$type).toBe('Treemap');
// We can't directly test the accDescr property due to how Langium processes TitleAndAccessibilities
expect(result.value.TreemapRows).toHaveLength(2);
});
@@ -136,7 +136,7 @@ accDescr: This is an accessible description
"Root"
"Child": 100`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe('TreemapDoc');
expect(result.value.$type).toBe('Treemap');
// We can't directly test these properties due to how Langium processes TitleAndAccessibilities
expect(result.value.TreemapRows).toHaveLength(2);
});

20
packages/tiny/CHANGELOG.md
View File

@@ -1,5 +1,25 @@
# mermaid
## 11.8.1
### Patch Changes
- Updated dependencies [[`0da2922`](https://github.com/mermaid-js/mermaid/commit/0da2922ee7f47959e324ec10d3d21ee70594f557)]:
- @mermaid-js/parser@0.6.1
## 11.8.0
### Minor Changes
- [#6590](https://github.com/mermaid-js/mermaid/pull/6590) [`f338802`](https://github.com/mermaid-js/mermaid/commit/f338802642cdecf5b7ed6c19a20cf2a81effbbee) Thanks [@knsv](https://github.com/knsv)! - Adding support for the new diagram type nested treemap
### Patch Changes
- [#6707](https://github.com/mermaid-js/mermaid/pull/6707) [`592c5bb`](https://github.com/mermaid-js/mermaid/commit/592c5bb880c3b942710a2878d386bcb3eb35c137) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Log a warning when duplicate commit IDs are encountered in gitGraph to help identify and debug rendering issues caused by non-unique IDs.
- Updated dependencies [[`f338802`](https://github.com/mermaid-js/mermaid/commit/f338802642cdecf5b7ed6c19a20cf2a81effbbee)]:
- @mermaid-js/parser@0.6.0
## 11.7.0
### Minor Changes

2
packages/tiny/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@mermaid-js/tiny",
"version": "11.7.0",
"version": "11.8.1",
"description": "Tiny version of mermaid",
"type": "commonjs",
"main": "./dist/mermaid.tiny.js",