A code block is a dark, editor-style card for the snippets that belong in a technical diagram: the payload next to an API arrow, the config beside an infrastructure node, the query under a database. It renders code in a monospace font with syntax highlighting, and it lives on the canvas like any other element, so you can place, resize, group, and move it freely.
Adding one
Click Code block to drop one on the canvas, or drag on the canvas to draw it at a size.
Editing the code
Double-clicking opens the Edit code dialog: a monospace editor where Tab inserts spaces instead of moving focus, so indenting works the way it does in a real editor. Pick the snippet's language from the dropdown, save, and the block updates in one undoable step. The same editor is available from the Code section of the block's right-click context menu.
Languages and highlighting
Ten languages get syntax highlighting: plain text, TypeScript, JavaScript, Python, JSON, Bash, SQL, HTML, CSS, and YAML. The chosen language shows as a small badge in the block's top-right corner (hidden for plain text), so a reader can tell a SQL query from a YAML manifest at a glance.
A fixed dark look
Like sticky notes staying amber, a code block keeps its fixed dark look whatever the theme: switching or restyling the tab's theme never recolours it. Code reads best on a dark background, and keeping every block identical means snippets look the same across every diagram.
Reach for a code block instead of a text element whenever the content is code: you get monospace alignment, preserved whitespace, and highlighting for free.
Was this article helpful?