mirror of
https://github.com/mermaid-js/mermaid.git
synced 2026-05-23 20:10:38 +00:00
Mac CarterandClaude Opus 4.6 (prompted with care by @M-a-c)
700a6925c0
When set to false, only user-declared namespaces render as flat boxes using their full qualified name; auto-created intermediate ancestors are elided and their children moved to the nearest explicit ancestor. Defaults to true (existing nested behavior). Adds explicit field to NamespaceNode, updates both v2 and v3 renderers, demos, docs, unit tests, and Cypress E2E snapshots. Co-Authored-By: Claude Opus 4.6 (prompted with care by @M-a-c)
444 lines
10 KiB
HTML
444 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<title>Class diagrams Mermaid Quick Test Page</title>
|
|
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
|
<style>
|
|
div.mermaid {
|
|
/* font-family: 'trebuchet ms', verdana, arial; */
|
|
font-family: 'Courier New', Courier, monospace !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Class diagram demos</h1>
|
|
|
|
<pre class="mermaid">
|
|
---
|
|
title: Demo Class Diagram
|
|
---
|
|
classDiagram
|
|
accTitle: Demo Class Diagram
|
|
accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra.
|
|
|
|
Animal <|-- Duck
|
|
Animal <|-- Fish
|
|
Animal <|-- Zebra
|
|
Animal : +int age
|
|
Animal : +String gender
|
|
Animal: +isMammal()
|
|
Animal: +mate()
|
|
|
|
class Duck{
|
|
+String beakColor
|
|
+swim()
|
|
+quack()
|
|
}
|
|
class Fish{
|
|
-Listint sizeInFeet
|
|
-canEat()
|
|
}
|
|
class Zebra{
|
|
+bool is_wild
|
|
+run(List~T~, List~OT~)
|
|
%% +run-composite(List~T, K~)
|
|
+run-nested(List~List~OT~~)
|
|
}
|
|
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
Class01 <|-- AveryLongClass : Cool
|
|
|
|
<<interface>> Class01
|
|
Class03 "0" *-- "0..n" Class04
|
|
Class05 "1" o-- "many" Class06
|
|
Class07 .. Class08
|
|
Class09 "many" --> "1" C2 : Where am i?
|
|
Class09 "0" --* "1..n" C3
|
|
Class09 --|> Class07
|
|
Class07 : equals()
|
|
Class07 : Object[] elementData
|
|
Class01 : #size()
|
|
Class01 : -int chimp
|
|
Class01 : +int gorilla
|
|
Class08 <--> C2: Cool label
|
|
class Class10 {
|
|
<<service>>
|
|
int id
|
|
size()
|
|
}
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
class Class01~T~
|
|
Class01 : #size()
|
|
Class01 : -int chimp
|
|
Class01 : +int gorilla
|
|
Class01 : +abstractAttribute string*
|
|
class Class10~T~ {
|
|
<<service>>
|
|
int id
|
|
size()
|
|
}
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
Class01~T~ <|-- AveryLongClass : Cool
|
|
<<interface>> Class01
|
|
Class03~T~ "0" *-- "0..n" Class04
|
|
Class05 "1" o-- "many" Class06
|
|
Class07~T~ .. Class08
|
|
Class09 "many" --> "1" C2 : Where am i?
|
|
Class09 "0" --* "1..n" C3
|
|
Class09 --|> Class07
|
|
Class07 : equals()
|
|
Class07 : Object[] elementData
|
|
Class01 : #size()
|
|
Class01 : -int chimp
|
|
Class01 : +int gorilla
|
|
Class08 <--> C2: Cool label
|
|
class Class10 {
|
|
<<service>>
|
|
int id
|
|
size()
|
|
}
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
Interface1 ()-- Interface1Impl
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
direction LR
|
|
Animal ()-- Dog
|
|
Animal ()-- Cat
|
|
note for Cat "should have no members area"
|
|
Dog : bark()
|
|
Dog : species()
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
direction RL
|
|
Fruit ()-- Apple
|
|
Apple : color()
|
|
Apple : -int leafCount()
|
|
Fruit ()-- Pineapple
|
|
Pineapple : color()
|
|
Pineapple : -int leafCount()
|
|
Pineapple : -int spikeCount()
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
class Person {
|
|
+ID : Guid
|
|
+FirstName : string
|
|
+LastName : string
|
|
-privateProperty : string
|
|
#ProtectedProperty : string
|
|
~InternalProperty : string
|
|
~AnotherInternalProperty : List~List~string~~
|
|
}
|
|
class People List~List~Person~~
|
|
</pre>
|
|
<hr />
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
namespace Company.Project.Module {
|
|
class GenericClass~T~ {
|
|
+addItem(item: T)
|
|
+getItem() T
|
|
}
|
|
}
|
|
</pre>
|
|
<hr />
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
namespace Company.Project.Module.SubModule {
|
|
class Report {
|
|
+generatePDF(data: List)
|
|
+generateCSV(data: List)
|
|
}
|
|
}
|
|
namespace Company.Project.Module {
|
|
class Admin {
|
|
+generateReport()
|
|
}
|
|
}
|
|
Admin --> Report : generates
|
|
</pre>
|
|
<hr />
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
namespace Company.Project.Module {
|
|
class User {
|
|
+login(username: String, password: String)
|
|
+logout()
|
|
}
|
|
class Admin {
|
|
+addUser(user: User)
|
|
+removeUser(user: User)
|
|
+generateReport()
|
|
}
|
|
class Report {
|
|
+generatePDF(reportData: List)
|
|
+generateCSV(reportData: List)
|
|
}
|
|
}
|
|
Admin --> User : manages
|
|
Admin --> Report : generates
|
|
</pre>
|
|
<hr />
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
namespace Shapes {
|
|
class Shape {
|
|
+calculateArea() double
|
|
}
|
|
class Circle {
|
|
+double radius
|
|
}
|
|
class Square {
|
|
+double side
|
|
}
|
|
}
|
|
|
|
Shape <|-- Circle
|
|
Shape <|-- Square
|
|
|
|
namespace Vehicles {
|
|
class Vehicle {
|
|
+String brand
|
|
}
|
|
class Car {
|
|
+int horsepower
|
|
}
|
|
class Bike {
|
|
+boolean hasGears
|
|
}
|
|
}
|
|
|
|
Vehicle <|-- Car
|
|
Vehicle <|-- Bike
|
|
Car --> Circle : "Logo Shape"
|
|
Bike --> Square : "Logo Shape"
|
|
|
|
</pre>
|
|
<hr />
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
note "This is a outer note"
|
|
note for Class1 "This is a outer note for Class1"
|
|
namespace ns {
|
|
note "This is a inner note"
|
|
note for Class1 "This is a inner note for Class1"
|
|
class Class1
|
|
class Class2
|
|
}
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Nested Namespaces (dot notation)</h2>
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
namespace Company.Engineering.Backend {
|
|
class Developer {
|
|
+writeCode()
|
|
+reviewPR()
|
|
}
|
|
}
|
|
namespace Company.Engineering.Frontend {
|
|
class Designer {
|
|
+createMockup()
|
|
+buildUI()
|
|
}
|
|
}
|
|
namespace Company.Engineering {
|
|
class TechLead {
|
|
+planSprint()
|
|
}
|
|
}
|
|
namespace Company {
|
|
class CEO {
|
|
+makeDecisions()
|
|
}
|
|
}
|
|
CEO --> TechLead : oversees
|
|
TechLead --> Developer : leads
|
|
TechLead --> Designer : leads
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Nested Namespaces (syntactic nesting)</h2>
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
namespace Platform {
|
|
namespace Auth {
|
|
class UserService {
|
|
+login()
|
|
+logout()
|
|
}
|
|
class TokenManager {
|
|
+generateToken()
|
|
+validateToken()
|
|
}
|
|
}
|
|
namespace Data {
|
|
class Repository {
|
|
+find()
|
|
+save()
|
|
}
|
|
}
|
|
class Gateway {
|
|
+route()
|
|
}
|
|
}
|
|
UserService --> TokenManager : uses
|
|
Gateway --> UserService : delegates
|
|
Gateway --> Repository : delegates
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Mixed: dot notation + syntactic nesting</h2>
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
namespace App.Services {
|
|
namespace Billing {
|
|
class Invoice {
|
|
+calculate()
|
|
}
|
|
}
|
|
class Logger {
|
|
+log()
|
|
}
|
|
}
|
|
namespace App.Models {
|
|
class User {
|
|
+String name
|
|
}
|
|
}
|
|
Invoice --> Logger : logs to
|
|
Invoice --> User : bills
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Compact mode (hierarchicalNamespaces: false)</h2>
|
|
<p>
|
|
Same source as the dot-notation demo above, rendered with
|
|
<code>hierarchicalNamespaces: false</code>. Only the three user-declared namespaces are
|
|
emitted as flat boxes using their full qualified name; intermediate ancestors (e.g.
|
|
<code>Company.Engineering</code> would only appear if declared) are skipped.
|
|
</p>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
class:
|
|
hierarchicalNamespaces: false
|
|
---
|
|
classDiagram
|
|
namespace Company.Engineering.Backend {
|
|
class Developer {
|
|
+writeCode()
|
|
+reviewPR()
|
|
}
|
|
}
|
|
namespace Company.Engineering.Frontend {
|
|
class Designer {
|
|
+createMockup()
|
|
+buildUI()
|
|
}
|
|
}
|
|
namespace Company {
|
|
class CEO {
|
|
+makeDecisions()
|
|
}
|
|
}
|
|
CEO --> Developer : oversees
|
|
CEO --> Designer : oversees
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Compact mode with syntactic nesting</h2>
|
|
<p>
|
|
Syntactic nesting in compact mode: nested <code>namespace</code> blocks still produce
|
|
fully-qualified names, but only the explicit leaf namespaces render as flat boxes.
|
|
</p>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
class:
|
|
hierarchicalNamespaces: false
|
|
---
|
|
classDiagram
|
|
namespace Platform {
|
|
namespace Auth {
|
|
class UserService {
|
|
+login()
|
|
}
|
|
}
|
|
namespace Data {
|
|
class Repository {
|
|
+find()
|
|
}
|
|
}
|
|
}
|
|
UserService --> Repository : reads
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Namespace labels</h2>
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
namespace Auth["Authentication Service"] {
|
|
class UserService {
|
|
+login()
|
|
+logout()
|
|
}
|
|
class TokenManager {
|
|
+generate()
|
|
}
|
|
}
|
|
namespace Store["Data Store"] {
|
|
class Repository {
|
|
+find()
|
|
+save()
|
|
}
|
|
}
|
|
UserService --> TokenManager : uses
|
|
UserService --> Repository : reads from
|
|
</pre>
|
|
<hr />
|
|
|
|
<script type="module">
|
|
import mermaid from './mermaid.esm.mjs';
|
|
mermaid.initialize({
|
|
theme: 'default',
|
|
// themeCSS: '.node rect { fill: red; }',
|
|
logLevel: 3,
|
|
securityLevel: 'loose',
|
|
flowchart: { curve: 'basis' },
|
|
gantt: { axisFormat: '%m/%d/%Y' },
|
|
sequence: { actorMargin: 50 },
|
|
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|