Type-safe diagrams and source code from one schema — live inside VS Code. Syntax highlighting and a live SVG preview for the typeDiagram DSL.

TypeDiagram VS Code extension with live SVG preview

Features

Syntax highlighting for .td and .typediagram files
Light and dark themes tuned for TypeDiagram
Live SVG preview — edit the DSL, see the diagram update instantly
Markdown preview rendering — ```typediagram fences inside .md files render as SVG in the built-in markdown preview
Export markdown to PDF with diagrams embedded as vector paths (not rasterised screenshots)
Language configuration (comments, brackets, auto-close pairs)

Usage

Open a .td or .typediagram file
Click the Open Preview icon in the editor title bar, or run TypeDiagram: Open Preview from the command palette
The preview updates live as you type

Author docs in markdown with inline ```typediagram fenced code blocks, then export to a printable PDF:

Right-click a .md file in the Explorer (or the editor tab) → Export to PDF with typeDiagrams
The PDF is written next to the source file. No save dialog, no prompts.
Every typeDiagram fence is rendered as an inline SVG in the PDF — zooming the PDF keeps paths crisp.

Command ID: typediagram.exportMarkdownPdf. Also available from the Command Palette when a markdown file is active.

typediagram.autoOpenPreview (default true) — auto-open the SVG preview when a .td file is opened.
typediagram.pdfExport.theme ("light" | "dark", default "light") — theme used for diagrams inside the generated PDF. The page background is always white for print.

typeDiagram

type User {
  id:    UUID
  name:  String
  email: Option<Email>
}

union Option<T> {
  Some { value: T }
  None
}

alias Email = String

Three constructs: type (records), union (tagged sum types), alias (newtypes). Generics with <T>. Comments with #.