Diagrama

Diagrama is a minimalistic web-based diagram editor.
It runs entirely client-side: your diagram does not leave your browser.

The Mermaid syntax is used to write diagram code, and you can:

Name your diagrams by clicking on the title in edit mode
Export to SVG or PNG
Right-click on the button to copy to the clipboard instead of saving.
Share by copying the URL
Print using your browser
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".

Diagrama can be installed as a web app, and it works on small touch screens.

App shortcuts
`Ctrl`+`E`	show/hide the editor
`Ctrl`+`Enter`	update diagram based on the code
`Ctrl`+`P`	print diagram
`Ctrl`+`S`	copy diagram URL to the clipboard (share)
`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` or `F1`	see all available commands

Diagram
Scroll	zoom in/out the diagram
Click and move cursor	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.

download