A port of TikZJax runs on pure Node.js and WebAssembly.
A port of TikZJax runs on pure Node.js and WebAssembly.
Node-TikZJax lets you render LaTeX and TikZ diagrams to SVG images without the need to install LaTeX toolchain to the environment. You can render graphs, figures, circuits, chemical diagrams, commutative diagrams, and more.
``bash`
npm install node-tikzjax
See the demo folder for some example TikZ diagrams.
Live demo: https://stackblitz.com/edit/node-tikzjax
The example TeX source code is taken from obsidian-tikzjax.
Basic usage:
`typescript
import tex2svg from 'node-tikzjax';
const source = \\begin{document}
\\begin{tikzpicture}
\\draw (0,0) circle (1in);
\\end{tikzpicture}
\\end{document};
const svg = await tex2svg(source);
`
Which generates the following SVG:
`html`
The input TeX source is rendered to DVI, then rendered to SVG.
- Remember to load any packages you need with \usepackage{}, and include \begin{document} and \end{document}.\documentclass{standalone}
- The standalone document class is used ().
The following packages are available in \usepackage{}:
- chemfig
- tikz-cd
- circuitikz
- pgfplots
- array
- amsmath
- amstext
- amsfonts
- amssymb
- tikz-3dplot
> [!NOTE]
> Don't run multiple instances of node-tikzjax at the same time. This may cause unexpected results.
There are some options you can pass to tex2svg():
`typescript\usepackage{pgfplots}\usepackage[intlimits]{amsmath}
const svg = await tex2svg(source, {
// Print log of TeX engine to console. Default: false.
showConsole: true,
// Additional TeX packages to load. Default: {}.
// The following example results in .\usetikzlibrary{arrows.meta,calc}
texPackages: { pgfplots: '', amsmath: 'intlimits' },
// Additional TikZ libraries to load. Default: ''.
// The following example results in .
tikzLibraries: 'arrows.meta,calc',
// Additional source code to add to the preamble of input. Default: ''.
addToPreamble: '% comment',
// Add to SVG. Default: false.`
// This could be useful if you want to embed the SVG in a HTML file.
embedFontCss: true,
// URL of the font CSS file. Default: 'https://cdn.jsdelivr.net/npm/node-tikzjax@latest/css/fonts.css'.
fontCssUrl: 'https://cdn.jsdelivr.net/npm/node-tikzjax@latest/css/fonts.css',
// Disable SVG optimization with SVGO. Default: false.
disableOptimize: false,
});
You can also separate the TeX rendering and DVI to SVG conversion steps:
`typescript
import { load, tex, dvi2svg } from 'node-tikzjax';
// Load the WebAssembly module and necessary files.
await load();
// Read TeX source from a file.
const input = readFileSync('sample.tex', 'utf8');
// Render TeX source to DVI.
const dvi = await tex(input, {
showConsole: true,
texPackages: { pgfplots: '', amsmath: 'intlimits' },
tikzLibraries: 'arrows.meta,calc',
addToPreamble: '% comment',
});
// Output generated DVI to a file.
writeFileSync('sample.dvi', dvi);
// Render DVI to SVG.
const svg = await dvi2svg(dvi, {
embedFontCss: true,
fontCssUrl: 'https://cdn.jsdelivr.net/npm/node-tikzjax@latest/css/fonts.css',
disableOptimize: false,
});
// Output generated SVG to a file.
writeFileSync('sample.svg', svg);
``
This project is greatly inspired by obsidian-tikzjax.
This port would not be possible without the original tikzjax project.
Prebuilt WebAssembly binaries and supporting files are downloaded from artisticat1/tikzjax#output-single-file.
A fork of artisticat1/dvi2html#ww-modifications is used to convert DVI to SVG.
The BaKoMa fonts shipped with this package are licensed under the BaKoMa Fonts Licence.
Thanks to all the authors for their great work!