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.

SebastianJS pane shows

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
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
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 2

match
0.004px 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
erDiagram
"HOSPITAL" {
  int id PK
  int doctor_id FK
  string address UK
  string name
  string phone_number
  string fax_number
}

Example 3

match
0.004px 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
erDiagram
"HOSPITAL" {
  int id PK
  int doctor_id PK, FK
  string address UK
  string name
  string phone_number
  string fax_number
}

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
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
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 5

match
0.000px 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
erDiagram
p[Person] {
    string firstName
    string lastName
}
a["Customer Account"] {
    string email
}
p ||--o| a : has

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
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
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"

Example 7

match
0.004px 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
erDiagram
_customer_order {
    bigint id PK
    bigint customer_id FK
    text shipping_address 
    text delivery_method 
    timestamp_with_time_zone ordered_at 
    numeric total_tax_amount 
    numeric total_price 
    text payment_method 
}