Adding & Editing Diagrams

You can work with diagrams in Accessible Notes in two ways: they can be extracted automatically during transcription, or you can create them yourself from scratch. Both paths lead to the same place — the Diagrams tab, where you edit code, preview results, and manage all the diagrams in your note.

Auto-extracted diagrams

During transcription, the system looks for figures, diagrams, and charts in your uploads and reconstructs them as TikZ code. Each extracted diagram is added to your note's diagram list with an auto-generated name and a draft alt text.

Auto-extracted diagrams are a starting point. Review the TikZ code, check that the preview looks right, and update the alt text to accurately describe what the diagram shows. The transcriber does its best, but diagrams are complex — you may need to make adjustments.

Creating a diagram from scratch

To add a new diagram, open the Diagrams tab and click New. A blank diagram is created with an auto-generated name like diagram_1. You can start typing TikZ commands in the editor right away.

First things to do with a new diagram:

1. Rename it to something descriptive (e.g., data_flow instead of diagram_1)
2. Write your TikZ code in the editor
3. Add meaningful alt text describing what the diagram shows

The Diagrams tab layout

The Diagrams tab has three panels side by side:

• Left panel — diagram list. All diagrams in your note are listed here. Click any diagram to select it and load it into the editor.
• Center panel — editor. Contains the TikZ code editor with syntax highlighting, plus the name field and alt text field below it. The placeholder you'll use in your note is shown here too.
• Right panel — live preview. Shows the rendered SVG of your diagram. Updates automatically about two seconds after you stop typing.

Editing workflow

1. Select a diagram from the list on the left
2. Edit the TikZ code in the center panel
3. Watch the preview update on the right — if there's a syntax error, you'll see an error message instead of the diagram
4. Changes are saved automatically as you work

Inserting a diagram into your note

Below the code editor, you'll see the placeholder for the current diagram, like {{diagram:my_diagram}}. Copy this and paste it into your note body (in the Editor) wherever you want the diagram to appear. When you export, the placeholder is replaced with the rendered image.

Deleting a diagram

To delete a diagram, select it in the list and choose the delete option. Deleting a diagram removes it from the list and also removes any {{diagram:name}} placeholders that reference it from your note body.

If you want to remove the diagram from your note without losing the code, delete the placeholder in the editor instead — the diagram stays in your list but just won't appear in the exported document.

Downloading a diagram

You can download any diagram as an SVG file directly from the preview panel. This is useful if you need the diagram for another document or want to use it outside Accessible Notes.

A note on the live preview

The preview is compiled server-side — your TikZ code is processed by the same LaTeX engine used during PDF export. This means what you see in the preview is exactly what will appear in your exported documents. If the preview looks right, the export will too.