Skip to content

TikZ Diagrams & Graphical Editor

TeXcore integrates an offline, background-compiled TikZ vector graphics renderer and a fully interactive TikZ Graphical Editor. You can write standard LaTeX TikZ scripts directly inside code blocks or edit them visually using a drag-and-drop CAD-like interface.

Architecture & Worker Compilation

To prevent Obsidian UI freezes during heavy TeX compilations, TeXcore utilizes a decoupled Web Worker Compiler that operates fully offline:

sequenceDiagram
    participant Main as Obsidian Editor
    participant Worker as TikZJax Web Worker
    participant Disk as Local Storage (WASM)

    Main->>Disk: Read & decompress core assets (tex.wasm.gz, core.dump.gz)
    Main->>Worker: Spawn thread & send decompressed WebAssembly buffers
    Note over Worker: Spin up virtual memory filesystem
    Main->>Worker: Post compile command (TikZ code)
    Worker->>Worker: Sync compile to DVI format
    Worker-->>Main: Return DVI binary output
    Main->>Main: Translate DVI to SVG using dvi2html & insert into note

Editor Workflows

Create a code block in your markdown document and identify it with tikz. You can include packages like pgfplots or libraries in the preamble:

\usepackage{pgfplots}
\begin{document}
\begin{tikzpicture}
  \begin{axis}[xlabel=$x$, ylabel=$y$]
    \addplot[color=red,mark=x] coordinates {
      (2,-3) (3,5) (4,7)
    };
  \end{axis}
\end{tikzpicture}
\end{document}
  1. Click the Edit visually button on any rendered TikZ SVG block, or use the Command Palette (Ctrl+P → Insert display math or search for the TikZ Editor commands).
  2. A CAD-style modal opens:
    • Left Sidebar: Component library featuring core shapes (lines, circles, rectangles) and package modules.
    • Center Canvas: Interactive grid with zoom (Ctrl+Scroll Lock), panning (++spacebar+drag++), and snapping (toggle via G or H).
    • Right Sidebar: Property editor (adjust color, bold, italics, font size, stroke thickness) and raw TikZ Code synchronization.
  3. Press Ctrl+Z to undo and Ctrl+Y to redo actions.
  4. Click the Update block button to compile and insert the code block into your note.

Component Package Manager

For complex diagrams (like circuits or flowcharts), the Graphical Editor features a Component Package Manager accessed via the footer button in the Left Sidebar.

Package Installation Flow

Click Manage Packages and search for libraries like circuitikz. Installing a package decompresses and caches its TeX dependency files (.tex/.sty) in memory, dynamically expanding your visual element sidebar with custom shapes (e.g. resistors, logic gates, operational amplifiers) that can be drag-dropped onto the grid canvas.

Diagnostics & Troubleshooting

Common TikZ Compilation Hurdles

  • Empty Container / Failed rendering: Verify that the tikzjax-assets folder exists inside your plugin installation directory: .obsidian/plugins/TeXcore/tikzjax-assets/.
  • Package Not Found Error: Double-check spelling inside your block preamble. Only packages included in the asset registry are available offline.
  • Canvas Panning Locked: Ensure you hold down the ++spacebar++ while dragging on the canvas container to pan the grid layout.
  • Compilation Timed Out: Avoid infinite loops or extremely dense coordinate calculations that exceed WebAssembly heap size allocations.