Diagrama

Diagrama is a minimalistic web-based diagram editor.

It runs entirely client-side: your data does not leave your browser. You can install it as a web app, and it works on small touch screens and while you are offline. The Mermaid syntax is used to write diagram code, and you can also:

Name your diagrams by clicking on the title in edit mode
Export to PNG or SVG or copy to the clipboard
Keep an automatic library of diagrams
Share by copying the URL
Print the diagram
Include icons with syntax !!graph_2!!
Icons mostly work in flowcharts, but also in certain parts of class, state, and ER diagrams.
See the list of available icons; select an icon and find the "Icon name".

App shortcuts
`Ctrl`+`E`	show/hide the editor
`Ctrl`+`Enter`	update diagram based on the code
`Ctrl`+`S`	copy diagram URL to the clipboard (share)
`Ctrl`+`C`	copy diagram to the clipboard (export)
`Ctrl`+`X`	export the diagram to PNG or SVG
`Ctrl`+`Y`	open the diagram library
`Ctrl`+`Alt`+`R`	reset diagram code to the default template

Editor shortcuts
`Ctrl`+`F`	find-and-replace
`Ctrl` + click	add cursors
`F2`	select all occurrences of the symbol under the cursor
`Ctrl`+`Shift`+`K`	select next occurrence of the symbol under the cursor
`Shift`+`Alt`+`Up`	add cursor to the line above
`Shift`+`Alt`+`Down`	add cursor to the line below
`Ctrl`+`D`	delete line
`Ctrl`+`M`	go to matching brackets
`Ctrl` + scroll	set the editor font size
`Ctrl`+`Shift`+`0`	set automatic font size for the editor
`Ctrl`+`Shift`+`P`	see all available commands

Diagram
Scroll	zoom in/out the diagram
Click and move	pan the diagram

The code is available on GitHub: https://github.com/alnvdl/diagrama
Diagrama is built on top of the wonderful Monaco Editor and Mermaid projects.
The icons come from the Material Symbols & Icons project.