Diagrams and images

Drawing diagrams

BookStack has diagrams.net (formerly drawio) built in. This is the killer feature for documenting how systems connect.

How to insert one

1. In the editor toolbar, click the diagrams button.
2. A drawio window opens. Draw your diagram.
3. Click Save. The diagram is embedded but stays editable — click it later to re-open.

What to draw

• System architecture (boxes = services, arrows = data flows)
• Sequence diagrams (who calls whom)
• Data flow between JSON feeds and the websites that consume them
• Deployment diagrams

Images

Drag-and-drop images into the editor. They upload automatically.

Code and JSON

Use the code block button (</>) and pick the language. All syntax-highlighted.