diagrams.net GitHub Integration

Self-editing HTML page with diagrams. Click Edit Page and double click diagrams. Use Ctrl+[X,C,V,B,I] Cut, Copy, Paste, Bold, Italic. Click Save to write changes to GitHub. Fork me on GitHub.

Shadows

ER Diagram (SVG)

UML Diagram (PNG, Scaled)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Inline SVG with foreignObjects

UTF-8öäüEnd
Split
Split
HTML Markup
with Links
[Not supported by viewer]Shape withLink
Start
Start
Merge
Merge

Links require inline SVG. Inline SVG is more efficient than embedded diagrams with scripting.
ForeignObjects are not supported in Internet Explorer.

PNG (left) and SVG (right)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.