classchart

12 samples from the mermaid demo corpus, rendered both ways. The three SebastianJS forms come off one layout, so the measurements below hold for all of them.

SebastianJS pane shows

Example 1

match
0.014px mean node offset over 4 nodes0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
---
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~~)
  }

Example 2

match
0.012px mean node offset over 12 nodes0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
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()
  }

Example 3

match
0.011px mean node offset over 2 nodes0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
classDiagram
class Class01~T~
Class01 : #size()
Class01 : -int chimp
Class01 : +int gorilla
Class01 : +abstractAttribute string*
class Class10~T~ {
<<service>>
int id
size()
}

Example 4

match
0.014px mean node offset over 12 nodes0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
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()
    }

Example 5

match
0.004px mean node offset over 2 nodes0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
classDiagram
Interface1 ()-- Interface1Impl

Example 6

match
0.002px mean node offset over 5 nodes0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
classDiagram
direction LR
Animal ()-- Dog
Animal ()-- Cat
note for Cat "should have no members area"
Dog : bark()
Dog : species()

Example 7

match
0.005px mean node offset over 4 nodes0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
classDiagram
direction RL
Fruit ()-- Apple
Apple : color()
Apple : -int leafCount()
Fruit ()-- Pineapple
Pineapple : color()
Pineapple : -int leafCount()
Pineapple : -int spikeCount()

Example 8

invalid demo
SebastianJSno browser

Did not renderParse error on line 11:

mermaid-cliheadless Chrome

Did not renderCommand /home/runner/work/sebastianjs/sebastianjs/node_modules/.bin/mmdc exited 1:

Mermaid source
classDiagram
class Person {
  +ID : Guid
  +FirstName : string
  +LastName : string
  -privateProperty : string
  #ProtectedProperty : string
  ~InternalProperty : string
  ~AnotherInternalProperty : List~List~string~~
}
class People List~List~Person~~

Example 9

match
0.000px mean node offset over 1 node0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
classDiagram
namespace Company.Project.Module {
  class GenericClass~T~ {
    +addItem(item: T)
    +getItem() T
  }
}

Example 10

match
0.002px mean node offset over 2 nodes0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
classDiagram
namespace Company.Project.Module.SubModule {
  class Report {
    +generatePDF(data: List)
    +generateCSV(data: List)
  }
}
namespace Company.Project.Module {
  class Admin {
    +generateReport()
  }
}
Admin --> Report : generates

Example 11

match
0.008px mean node offset over 3 nodes0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
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

Example 12

match
0.011px mean node offset over 6 nodes0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source
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"