er
7 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.
Example 1
match
0.010px 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
mermaid-cliheadless Chrome
Mermaid source
---
title: This is a title
config:
theme: forest
---
erDiagram
%% title This is a title
%% accDescription Test a description
"Person . CUSTOMER"||--o{ ORDER : places
ORDER ||--|{ "€£LINE_ITEM ¥" : contains
"Person . CUSTOMER" }|..|{ "Address//StreetAddress::[DELIVERY ADDRESS]" : uses
"Address//StreetAddress::[DELIVERY ADDRESS]" {
int customerID FK
string line1 "this is the first address line comment"
string line2
string city
string region
string state
string(5) postal_code
string country
}
"a_~`!@#$^&*()-_=+[]{}|/;:'.?¡⁄™€£‹¢›∞fi§‡•°ª·º‚≠±œŒ∑„®†ˇ¥Á¨ˆˆØπ∏“«»åÅßÍ∂΃ϩ˙Ó∆Ô˚¬Ò…ÚæÆΩ¸≈π˛çÇ√◊∫ı˜µÂ≤¯≥˘÷¿" {
string name "this is an entity with an absurd name just to show characters that are now acceptable as long as the name is in double quotes"
}
"€£LINE_ITEM ¥" {
int orderID FK
int currencyId FK
number price
number quantity
number adjustment
number final_price
}
Example 4
match
0.003px 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
mermaid-cliheadless Chrome
Mermaid source
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string registrationNumber PK
string make
string model
string[] parts
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string driversLicense PK "The license #"
string(99) firstName "Only 99 characters are allowed"
string lastName
string phone UK
int age
}
NAMED-DRIVER {
string carRegistrationNumber PK, FK
string driverLicence PK,FK
}
MANUFACTURER only one to zero or more CAR : makes
Example 6
match
0.003px 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
mermaid-cliheadless Chrome
Mermaid source
erDiagram
p[Person] {
string firstName
string lastName
}
a["Customer Account"] {
string email
}
b["Customer Account Secondary"] {
string email
}
c["Customer Account Tertiary"] {
string email
}
d["Customer Account Nth"] {
string email
}
p ||--o| a : "hasone"
p ||--o| b : "hasonetwo"
p ||--o| c : "hasonetwothree"
p ||--o| d : "hasonetwothree...Nth"