Personal study archive

Diagrams & summaries for
CS @ Modern Academy

A curated collection of .drawio notes, rule sheets, and study aids — open any one in the draw.io editor with a click.

Make your own PDF

Opens an empty draw.io editor with the Scratchpad shape library, light mode, and LaTeX math enabled start your own summary from scratch.

Editor tips & tricks

Get more out of draw.io while building your summaries — math, fonts, and beautiful code snippets.

Math formulas with LaTeX math

Draw.io can render LaTeX inside any shape or text label — perfect for theorems, equations, and proofs in your summaries. Wrap your formula in single backticks `…` for inline math, or double dollars $$…$$ for a display block.

Enable it (already on for files opened from this site):

  1. Open the editor with the Edit button above (the URL already includes math=1).
  2. If you opened draw.io manually, go to Extras → Mathematical Typesetting and make sure it's checked.
  3. Double-click any shape, type your formula between backticks, and press Esc to render.

Examples:

`E = mc^2`
`\sum_{i=1}^{n} i = \frac{n(n+1)}{2}`
$$\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}$$

Tip: you don't need to memorize LaTeX — ask any AI assistant (ChatGPT, Claude, Gemini) to "convert this equation to LaTeX" and paste the result between the backticks.

Reference: apitemplate.io — Convert Markdown (with LaTeX) to PDF.

Custom typography with Google Fonts fonts

Draw.io supports any font from Google Fonts — just enable the integration once and type the family name.

  1. In the editor, open Extras → Configuration….
  2. Paste this JSON (or merge into existing config) and click Apply — the editor will reload: 
    {
  "customFonts": ["Roboto", "Poppins", "Fira Code", "JetBrains Mono"]
}
  3. Select any text or shape, open the right-side Text panel, and either pick a font from the Custom Fonts list or type the exact Google Fonts name (e.g. Poppins, Cairo, Fira Code).
  4. The font is fetched from Google Fonts on the fly and embedded when you export to PDF/PNG.

Note: the font name must match the Google Fonts family exactly (case-sensitive). Browse fonts.google.com to find the right name.

Beautiful code snippets code

Plain text doesn't do code justice. Two ways to get syntax-highlighted snippets into your diagrams:

Option 1 — Carbon (online, easiest):

  1. Open carbon.now.sh.
  2. Paste your code, pick a theme and language.
  3. Click Export → save as PNG (or copy as image).
  4. Drag the image straight onto the draw.io canvas.

Option 2 — VS Code (keeps native fonts & theme):

  1. In VS Code, open Ctrl+K Ctrl+S to open Keyboard Shortcuts.
  2. Search for the command Copy With Syntax Highlighting and bind it to a shortcut you'll remember (e.g. Ctrl+Alt+C).
  3. Select the code you want to copy in the editor.
  4. Press your new keybinding — VS Code copies the styled snippet to the clipboard.
  5. Switch to draw.io and paste it onto a code-snippet shape from the Scratchpad library (the Scratchpad is preloaded when you open files from this site).

Tip: the Scratchpad already includes ready-made code-block frames — paste your highlighted code inside one for a clean, consistent look across all your summaries.