artisticat1 / obsidian-tikzjax Goto Github PK

View Code? Open in Web Editor NEW

326.0 5.0 16.0 18.26 MB

Render LaTeX and TikZ diagrams in your notes

License: MIT License

JavaScript 23.66% TypeScript 76.34%

latex obsidian tikz obsidian-md obsidian-plugin

obsidian-tikzjax's Introduction

Obsidian TikZJax

A plugin for Obsidian that lets you render LaTeX and TikZ diagrams in your notes.

You can render graphs, figures, circuits, chemical diagrams, commutative diagrams, and more.

The following packages are available in \usepackage{}:

chemfig
tikz-cd
circuitikz
pgfplots
array
amsmath
- amstext
amsfonts
amssymb
tikz-3dplot

Usage

Content inside of tikz code blocks will be rendered by TikZJax.

Remember to load any packages you need with \usepackage{}, and include \begin{document} and \end{document}.
The standalone document class is used (\documentclass{standalone}).

Examples

```tikz
\begin{document}
  \begin{tikzpicture}[domain=0:4]
    \draw[very thin,color=gray] (-0.1,-1.1) grid (3.9,3.9);
    \draw[->] (-0.2,0) -- (4.2,0) node[right] {$x$};
    \draw[->] (0,-1.2) -- (0,4.2) node[above] {$f(x)$};
    \draw[color=red]    plot (\x,\x)             node[right] {$f(x) =x$};
    \draw[color=blue]   plot (\x,{sin(\x r)})    node[right] {$f(x) = \sin x$};
    \draw[color=orange] plot (\x,{0.05*exp(\x)}) node[right] {$f(x) = \frac{1}{20} \mathrm e^x$};
  \end{tikzpicture}
\end{document}
```

```tikz
\usepackage{circuitikz}
\begin{document}

\begin{circuitikz}[american, voltage shift=0.5]
\draw (0,0)
to[isource, l=$I_0$, v=$V_0$] (0,3)
to[short, -*, i=$I_0$] (2,3)
to[R=$R_1$, i>_=$i_1$] (2,0) -- (0,0);
\draw (2,3) -- (4,3)
to[R=$R_2$, i>_=$i_2$]
(4,0) to[short, -*] (2,0);
\end{circuitikz}

\end{document}
```

```tikz
\usepackage{pgfplots}
\pgfplotsset{compat=1.16}

\begin{document}

\begin{tikzpicture}
\begin{axis}[colormap/viridis]
\addplot3[
	surf,
	samples=18,
	domain=-3:3
]
{exp(-x^2-y^2)*x};
\end{axis}
\end{tikzpicture}

\end{document}
```

```tikz
\usepackage{tikz-cd}

\begin{document}
\begin{tikzcd}

    T
    \arrow[drr, bend left, "x"]
    \arrow[ddr, bend right, "y"]
    \arrow[dr, dotted, "{(x,y)}" description] & & \\
    K & X \times_Z Y \arrow[r, "p"] \arrow[d, "q"]
    & X \arrow[d, "f"] \\
    & Y \arrow[r, "g"]
    & Z

\end{tikzcd}

\quad \quad

\begin{tikzcd}[row sep=2.5em]

A' \arrow[rr,"f'"] \arrow[dr,swap,"a"] \arrow[dd,swap,"g'"] &&
  B' \arrow[dd,swap,"h'" near start] \arrow[dr,"b"] \\
& A \arrow[rr,crossing over,"f" near start] &&
  B \arrow[dd,"h"] \\
C' \arrow[rr,"k'" near end] \arrow[dr,swap,"c"] && D' \arrow[dr,swap,"d"] \\
& C \arrow[rr,"k"] \arrow[uu,<-,crossing over,"g" near end]&& D

\end{tikzcd}

\end{document}
```

```tikz
\usepackage{chemfig}
\begin{document}

\chemfig{[:-90]HN(-[::-45](-[::-45]R)=[::+45]O)>[::+45]*4(-(=O)-N*5(-(<:(=[::-60]O)-[::+60]OH)-(<[::+0])(<:[::-108])-S>)--)}

\end{document}
```

```tikz
\usepackage{chemfig}
\begin{document}

\definesubmol\fragment1{

    (-[:#1,0.85,,,draw=none]
    -[::126]-[::-54](=_#(2pt,2pt)[::180])
    -[::-70](-[::-56.2,1.07]=^#(2pt,2pt)[::180,1.07])
    -[::110,0.6](-[::-148,0.60](=^[::180,0.35])-[::-18,1.1])
    -[::50,1.1](-[::18,0.60]=_[::180,0.35])
    -[::50,0.6]
    -[::110])
    }

\chemfig{
!\fragment{18}
!\fragment{90}
!\fragment{162}
!\fragment{234}
!\fragment{306}
}

\end{document}
```

Acknowledgements

This plugin would not be possible without TikZJax by @kisonecat! In particular, it uses @drgrice1's fork that adds some additional features.

obsidian-tikzjax's People

Contributors

Stargazers

Watchers

Forkers

iamrecursion universemaster jeremy886 dangonite57 luk3ya0 ccaiccie thatvideoshopguy ashbir veryuniqueusername sivecow jameszhao01 l6174 jeetsukumaran nilswenning jmaccs filippobaroni

obsidian-tikzjax's Issues

[Question] Building Obsidian TikZJax

Rightyo! I'm starting to have a look at #4 whilst also keeping an eye out for a resurgence of #7, and I'm wondering what your development workflow is like.

In particular, I'm interested in what's required to build and use an updated version of your TikZJax fork in the plugin, as well as how you tend to work whilst developing changes to the plugin directly! I've been poking at the output-single-file branch in your TikZJax fork, and I'm assuming that it's as simple as npm run devbuild or npm run build for building with any changes there, but I'm a bit confused as to how I then integrate changes with the Obsidian plugin!

I'm very happy to write whatever tips you can give me into a little dev guide for the repo (CONTRIBUTING.md or whatever you feel is suitable) if that's helpful!

Producing different results in reading / preview mode

I am making a simple diagram like this:

However when exporting to a PDF or in reading mode it looks like this:

This is the code I am using to generate it:

% Required packages
\usepackage{tikz}
\usetikzlibrary{backgrounds}
 
\begin{document}
 
\begin{tikzpicture}[thick,
    set/.style = {circle,
        minimum size = 3cm,
        fill=orange},
	background rectangle/.style={fill=orange}, show background rectangle]

% Set A
\node[set,label={135:$A$}] (A) at (0,0) {};
 
% Set B
\node[set,label={45:$B$}] (B) at (1.8,0) {};
 
% Intersection
\begin{scope}
    \clip(0,0) circle(1.5cm);
    \clip (1.8,0) circle(1.5cm);
    \fill[white] (0,0) circle(1.5cm);    
\end{scope}
 
% Circles outline
\draw (0,0) circle(1.5cm);
\draw (1.8,0) circle(1.5cm);
 
\end{tikzpicture}
 
\end{document}

I am unsure if this is actually a problem with the plugin, or with tikzjax, or with obsidian. I am hoping this is something that could be resolved though.

In this case it seems to be like the \clip command isn't being run in reading mode / when being exported to PDF, which suggests something wrong on the obsidian / plugin side rather than a problem with tikzjax.

Let me know if you need more info, or if I can help :)

Please support amsymb, \mathbb and \mathscr

Rare cases of lag and battery draining on ipad pro 10.5''

I've been using obsidian-tikzjax for a few months now and it has happened twice already.
While writing the code obsidians starts lagging, making it really unusable, and the battery consumption increases dramatically (almost 10% drop in about a minute).
I've seen it happening twice already with circuitikz (about two months ago, in a pretty complicated circuit) and with pgfplots as soon as I implemented the package with exactly this code:

\usepackage{pgfplots}

\begin{document}
\begin{tikzpicture}
\end{tizpicture}
\end{document}

I've used these libraries multiple times on multiple files and had issues only these two times, i also found no way to reproduce consistently the bug.

Need help regarding adding packages in tikzjax

Hi @artisticat1 ,

As you have worked on tikzjax and added few packages to it, I request your help regarding few things about it :-

I compiled tikzjax repository (https://github.com/drgrice1/tikzjax) and successfully ran it (ww-modifications branch).
I want to add few packages in it e.g. chemfig etc.

For adding new packages, in the 'Options' section, it is mentioned to add packages like this:
"Additional packages can be made available by adding a file .json that contains an array of file names needed by the package to the tex_packages directory, and adding the gzipped files in that array to the tex_files directory."
3.1 Does it mean this:

 3.1.1 Create new directory 'tex_packages'
 3.1.2 Create chemfig.json file in it with the content (in array format):
 	3.1.2.1 [ "chemfig.sty", "chemfig.tex" ]
 3.1.3 Create tex_files directory with 2 files: chemfig.tex.gz, chemfig.sty.gz
 3.1.4 Execute: npm run build
 3.1.5 Do we also have to include above 2 filenames in the file: tex_files.json ?

Request your help.

Thanks,

top and bottom of images get cut off

it should be

but i get

This isn't exclusive to chemfig, but it is most apparent there.
This happens on mac and ios, i haven't tried on windows yet.

Chemfig scheme causes the bond lines to disappear

In chemfig \schemestart and \schemestop are used to define a scheme which is important to add arrows and to align elements.

The following is a document I made for my notes in Obsidian:

\usepackage{chemfig}
\begin{document}

\schemestart
\chemfig{[:-60]*6(---(*6(------))(-[:-90]Cl)---)}
\arrow
\chemname{\chemfig{[:-60]*6(---(*6(-----=))---)}}{major}
and
\chemname{\chemfig{[:-60]*6(---(*6(=-----))---)}}{minor}
\schemestop

\end{document}

This results in the following in TikZJax:

The same code produces the following when compiled using LaTeX:

I've been getting by by only using the \schemestart and \schemestop markers around the \arrow commands:

\usepackage{chemfig}
\begin{document}

\chemfig{[:-60]*6(---(*6(------))(-[:-90]Cl)---)}
\schemestart
\arrow
\schemestop
\chemname{\chemfig{[:-60]*6(---(*6(-----=))---)}}{major}
and
\chemname{\chemfig{[:-60]*6(---(*6(=-----))---)}}{minor}

\end{document}

This produces the following in TikZJax:

So the bond lines do render correctly, but because not all parts of the figure are part of the scheme, the arrow doesn't center appropriately. In this example the scheme is used on a small scale, but this is a necessary feature in creating more complex reaction figures.

How to typeset Cyrillic characters in tikzpicture nodes?

This code not working:

\usepackage{tikz}
\usetikzlibrary{positioning}
\tikzstyle{center} = [align=center]

\begin{document}
	\begin{tikzpicture}[domain=0:4]
	    %Nodes
	    \node[center] (InfiniteFractions) {Бесконечные дроби};
	    \node[center] (PeriodicFractions) [below left  = of InfiniteFractions] {
	        Переодические: \\
	        0,(6); 7,7(8) \\
	        $\frac{22}{7}$; 6,(1)
	    };
	    \node[center] (NonPeriodicFractions) [below right = of InfiniteFractions] {
	        Непериодические: \\
	        $\pi \approx 3,1415926535$ \\
	        $e \approx 2,71828182846$
	    };
	    %Lines
	    \draw[->] (InfiniteFractions.south) -- (PeriodicFractions.north);
	    \draw[->] (InfiniteFractions.south) -- (NonPeriodicFractions.north);
	\end{tikzpicture}
\end{document}

But if you remove the words with Cyrillic characters, then it works:

\usepackage{tikz}
\usetikzlibrary{positioning}
\tikzstyle{center} = [align=center]

\begin{document}
	\begin{tikzpicture}[domain=0:4]
	    %Nodes
	    \node[center] (InfiniteFractions) {InfiniteFractions};
	    \node[center] (PeriodicFractions) [below left  = of InfiniteFractions] {
	        PeriodicFractions: \\
	        0,(6); 7,7(8) \\
	        $\frac{22}{7}$; 6,(1)
	    };
	    \node[center] (NonPeriodicFractions) [below right = of InfiniteFractions] {
	        NonPeriodicFractions: \\
	        $\pi \approx 3,1415926535$ \\
	        $e \approx 2,71828182846$
	    };
	    %Lines
	    \draw[->] (InfiniteFractions.south) -- (PeriodicFractions.north);
	    \draw[->] (InfiniteFractions.south) -- (NonPeriodicFractions.north);
	\end{tikzpicture}
\end{document}

I am not sure what could be the problem?

Obsidian publish compatibility?

Hi there,

Is there a way to render tikz when using obsidian publish? Rendering each note as PDF works as expected and Tikz code is rendered, but with publish, the tikz environment is just parsed as a code block. Any chance there is a way to make this work with publish? Or is this something that should be reported to the obsidian team itself?

Image very small

testing the package with some commutative diagrams, using the tikz-cd library I see that embedded SVG is very tiny. I tried to zoom it using some LaTeX command, by example the option \begin{tikzcd}[scale=10] or the solutions shown here but they don't work.

My code of example is this:

\usepackage{tikz-cd}
\begin{document}
\begin{tikzcd}
G \arrow[rr, "f"] \arrow[rd, "c"] &  & H \\ & G/N \arrow[ru, "u"] &  
\end{tikzcd}
\end{document}

(Question) Is color inversion done via script or style?

I'm contemplating the possibility of an mdbook preprocessor feeding inputs to tikzjax during compile time to generate static svg outputs (lzanini/mdbook-katex#83).

Is the generated svg output's adaptive color inversion changed via css rules or is it a clientside javascript action? MdBook has many different themes to choose from, some light and some dark, and it would be best if the "default ink color" always matches that of the body-text rather than just black/white or background-invert.

tikz graphs package support

Hi,

I'm looking at using tikz-graphs

\usetikzlibrary {graphs}
\tikz \graph { a -> {b, c} -> d };

Is this something that can be dynamically added or are the libraries bundled?

Fix offset / misaligned text on mobile

Running the svg through https://github.com/svg/svgo fixes this.

Export to PDF not always drawing

There is always buggy and random behavior with multiple tikz pictures and while displayed in the editing + reading view they are not always display in pdf export.

Stuck on loading animation

When trying to render the following diagram:

\usepackage{tikz-cd}
\begin{document}
% https://q.uiver.app/?q=WzAsOCxbMCwwLCJLIl0sWzAsMSwiXFxtYXRoYmIgUSJdLFsxLDEsIlxcbWF0aGJiIFoiXSxbMSwwLCJcXG1hdGhjYWwgT19LIl0sWzIsMCwiXFxtYXRoY2FsIE9fSy9cXG1hdGhmcmFrIHAiXSxbMiwxLCJcXG1hdGhiYiBaL1xcbWF0aGZyYWsgcCBcXGNhcCBcXG1hdGhiYiBaIl0sWzMsMCwiXFx0ZXh0e2Zpbml0ZSBleHRlbnNpb24gb2Z9flxcbWF0aGJiIEZfcCJdLFszLDEsIiBcXG1hdGhiYiBGX3AiXSxbMCwxLCIiLDAseyJzdHlsZSI6eyJoZWFkIjp7Im5hbWUiOiJub25lIn19fV0sWzIsMywiIiwwLHsic3R5bGUiOnsiaGVhZCI6eyJuYW1lIjoibm9uZSJ9fX1dLFswLDMsIlxcc3Vwc2V0ZXEiLDEseyJzdHlsZSI6eyJib2R5Ijp7Im5hbWUiOiJub25lIn0sImhlYWQiOnsibmFtZSI6Im5vbmUifX19XSxbMiwxLCJcXHN1cHNldGVxIiwxLHsic3R5bGUiOnsiYm9keSI6eyJuYW1lIjoibm9uZSJ9LCJoZWFkIjp7Im5hbWUiOiJub25lIn19fV0sWzMsNCwiIiwyLHsic3R5bGUiOnsiaGVhZCI6eyJuYW1lIjoiZXBpIn19fV0sWzIsNSwiIiwyLHsic3R5bGUiOnsiaGVhZCI6eyJuYW1lIjoiZXBpIn19fV0sWzUsNCwiIiwxLHsic3R5bGUiOnsidGFpbCI6eyJuYW1lIjoiaG9vayIsInNpZGUiOiJ0b3AifX19XSxbNCw2LCI9IiwxLHsic3R5bGUiOnsiYm9keSI6eyJuYW1lIjoibm9uZSJ9LCJoZWFkIjp7Im5hbWUiOiJub25lIn19fV0sWzUsNywiPSIsMSx7ImxhYmVsX3Bvc2l0aW9uIjoxMCwic3R5bGUiOnsiYm9keSI6eyJuYW1lIjoibm9uZSJ9LCJoZWFkIjp7Im5hbWUiOiJub25lIn19fV1d
\begin{tikzcd} K & {\mathcal O_K} & {\mathcal O_K/\mathfrak p} & {\text{finite extension of}~\mathbb F_p} \\ {\mathbb Q} & {\mathbb Z} & {\mathbb Z/\mathfrak p \cap \mathbb Z} & { \mathbb F_p} \arrow[no head, from=1-1, to=2-1] \arrow[no head, from=2-2, to=1-2] \arrow["\supseteq"{description}, draw=none, from=1-1, to=1-2] \arrow["\supseteq"{description}, draw=none, from=2-2, to=2-1] \arrow[two heads, from=1-2, to=1-3] \arrow[two heads, from=2-2, to=2-3] \arrow[hook, from=2-3, to=1-3] \arrow["{=}"{description}, draw=none, from=1-3, to=1-4] \arrow["{=}"{description, pos=0.1}, draw=none, from=2-3, to=2-4] \end{tikzcd}
\end{document}

it is stuck on the loading animation:
https://i.imgur.com/uQXU16B.png

[Suggestion] Rename this plugin to `obsidian-latex-addons`?

This Obsidian plugin now has many Latex packages included besides just tikzjax. It might be good to rename the plugin to match it's functionality.

It would also help for SEO. There may be cases where a wants to find "obsidian latex addons" but doesn't know that "obsidian-tikzjax" is the plugin they are really looking for.

need `siunitx` or `\pu` support for drawing circuits

Can't use siunitx package for using SI units with circuitikz. Obsidian supports \pu command for physical units natively. But that doesn't work either.

[Question] Plotting images with external data files using pdfplot

Thank you very much for creating this plugin. Inserting TikZ images in obsidian has improved my work efficiency.

I recently ran into some problems when trying to draw an image using external data files.

When I use relative paths, I don't know which folder I should put my data files in.
When I use absolute paths the images don't display properly either.

I use the data on this page as an example. This example can also be viewed in this overleaf page.

I put mesh.txt file in my obsidian folder, and use the following code in obsidian.

\documentclass[border= 5mm]{standalone}
\usepackage{pgfplots}
\pgfplotsset{compat=1.14}
\begin{document}
\begin{tikzpicture}
\begin{axis}[grid=both,view={70}{40},colormap/viridis]
  \addplot3+[surf,mesh/rows=11,mesh/ordering=colwise,no marks] file {mesh.txt};
\end{axis}
\end{tikzpicture}
\end{document}

As shown in the picture below, the mesh image is not displayed properly in reading mode.

A case that cannot be correctly renderred

I use the tikz code provided by mathcha, I find in some case it can be renderred, while not in some other cases, which is weird.

For the not working case, the image is stuck in:

The case working:

\begin{document}

\tikzset{every picture/.style={line width=0.75pt}} %set default line width to 0.75pt        

\begin{tikzpicture}[x=0.75pt,y=0.75pt,yscale=-1,xscale=1]
%uncomment if require: \path (0,300); %set diagram left start at 0, and has height of 300

%Shape: Axis 2D [id:dp8764141779135839] 
\draw [line width=1.5]  (109,151.7) -- (312,151.7)(210.18,64.7) -- (210.18,238.7) (305,146.7) -- (312,151.7) -- (305,156.7) (205.18,71.7) -- (210.18,64.7) -- (215.18,71.7)  ;
%Shape: Circle [id:dp5522194396077298] 
\draw  [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][dash pattern={on 1.69pt off 2.76pt}][line width=1.5]  (204.65,151.7) .. controls (204.65,148.65) and (207.12,146.17) .. (210.18,146.17) .. controls (213.23,146.17) and (215.71,148.65) .. (215.71,151.7) .. controls (215.71,154.76) and (213.23,157.23) .. (210.18,157.23) .. controls (207.12,157.23) and (204.65,154.76) .. (204.65,151.7) -- cycle ;
%Shape: Circle [id:dp8143080163074996] 
\draw  [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][dash pattern={on 1.69pt off 2.76pt}][line width=1.5]  (169.62,151.7) .. controls (169.62,129.3) and (187.78,111.14) .. (210.18,111.14) .. controls (232.58,111.14) and (250.74,129.3) .. (250.74,151.7) .. controls (250.74,174.11) and (232.58,192.27) .. (210.18,192.27) .. controls (187.78,192.27) and (169.62,174.11) .. (169.62,151.7) -- cycle ;
%Shape: Ellipse [id:dp33449423710676096] 
\draw  [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][dash pattern={on 1.69pt off 2.76pt}][line width=1.5]  (81.88,151.7) .. controls (81.88,83.61) and (139.32,28.41) .. (210.18,28.41) .. controls (281.03,28.41) and (338.47,83.61) .. (338.47,151.7) .. controls (338.47,219.8) and (281.03,275) .. (210.18,275) .. controls (139.32,275) and (81.88,219.8) .. (81.88,151.7) -- cycle ;
%Shape: Arc [id:dp7307206684633336] 
\draw  [draw opacity=0][line width=1.5]  (82.85,136.48) .. controls (90.66,75.57) and (144.69,28.41) .. (210.18,28.41) .. controls (275.26,28.41) and (329.03,74.98) .. (337.36,135.34) -- (210.18,151.7) -- cycle ; \draw  [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]  (82.85,136.48) .. controls (90.66,75.57) and (144.69,28.41) .. (210.18,28.41) .. controls (275.26,28.41) and (329.03,74.98) .. (337.36,135.34) ;  
%Straight Lines [id:da9078059478487674] 
\draw [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]    (83.18,136.64) -- (338.18,135.64) ;
%Straight Lines [id:da22135254703940133] 
\draw [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]    (86.18,116.14) -- (332.18,116.14) ;
%Straight Lines [id:da024409394217732583] 
\draw [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]    (96.18,96.52) -- (324.18,96.52) ;
%Shape: Ellipse [id:dp38684539385835937] 
\draw  [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][fill={rgb, 255:red, 255; green, 0; blue, 0 }  ,fill opacity=1 ] (164.16,61.44) .. controls (164.16,59.53) and (165.65,57.98) .. (167.5,57.98) .. controls (169.34,57.98) and (170.84,59.53) .. (170.84,61.44) .. controls (170.84,63.36) and (169.34,64.91) .. (167.5,64.91) .. controls (165.65,64.91) and (164.16,63.36) .. (164.16,61.44) -- cycle ;
%Shape: Ellipse [id:dp17186168524664702] 
\draw  [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][fill={rgb, 255:red, 255; green, 0; blue, 0 }  ,fill opacity=1 ] (168.92,72.07) .. controls (168.92,70.16) and (170.41,68.61) .. (172.26,68.61) .. controls (174.11,68.61) and (175.6,70.16) .. (175.6,72.07) .. controls (175.6,73.99) and (174.11,75.54) .. (172.26,75.54) .. controls (170.41,75.54) and (168.92,73.99) .. (168.92,72.07) -- cycle ;
%Shape: Ellipse [id:dp5045582996062006] 
\draw  [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][fill={rgb, 255:red, 255; green, 0; blue, 0 }  ,fill opacity=1 ] (159.39,51.1) .. controls (159.39,49.19) and (160.89,47.64) .. (162.74,47.64) .. controls (164.58,47.64) and (166.08,49.19) .. (166.08,51.1) .. controls (166.08,53.02) and (164.58,54.57) .. (162.74,54.57) .. controls (160.89,54.57) and (159.39,53.02) .. (159.39,51.1) -- cycle ;
%Shape: Circle [id:dp7784626994336648] 
\draw  [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][dash pattern={on 1.69pt off 2.76pt}][line width=1.5]  (136.81,151.7) .. controls (136.81,111.18) and (169.66,78.34) .. (210.18,78.34) .. controls (250.7,78.34) and (283.55,111.18) .. (283.55,151.7) .. controls (283.55,192.22) and (250.7,225.07) .. (210.18,225.07) .. controls (169.66,225.07) and (136.81,192.22) .. (136.81,151.7) -- cycle ;
%Straight Lines [id:da5806520966695097] 
\draw [color={rgb, 255:red, 65; green, 117; blue, 5 }  ,draw opacity=1 ][line width=1.5]    (191.18,116.14) -- (229.18,116.14) ;
%Straight Lines [id:da8577415386536396] 
\draw [color={rgb, 255:red, 0; green, 0; blue, 255 }  ,draw opacity=1 ][line width=1.5]    (248.18,136.14) -- (282.18,136.14) ;
%Straight Lines [id:da2930700105485291] 
\draw [color={rgb, 255:red, 65; green, 117; blue, 5 }  ,draw opacity=1 ][line width=1.5]    (173.18,136.14) -- (248.18,136.14) ;
%Straight Lines [id:da3894553979972608] 
\draw [color={rgb, 255:red, 0; green, 0; blue, 255 }  ,draw opacity=1 ][line width=1.5]    (163.18,96.52) -- (257.18,96.52) ;
%Straight Lines [id:da3310839253134501] 
\draw [color={rgb, 255:red, 0; green, 0; blue, 255 }  ,draw opacity=1 ][line width=1.5]    (138.18,136.14) -- (173.18,136.14) ;
%Straight Lines [id:da6831758357075788] 
\draw [color={rgb, 255:red, 0; green, 0; blue, 255 }  ,draw opacity=1 ][line width=1.5]    (146.18,116.14) -- (191.18,116.14) ;
%Straight Lines [id:da9892417800894142] 
\draw [color={rgb, 255:red, 0; green, 0; blue, 255 }  ,draw opacity=1 ][line width=1.5]    (229.18,116.14) -- (275.18,116.14) ;

% Text Node
\draw (179,160.72) node [anchor=north west][inner sep=0.75pt]  [font=\scriptsize,color={rgb, 255:red, 65; green, 117; blue, 5 }  ,opacity=1 ]  {$n=1$};
% Text Node
\draw (166,197.72) node [anchor=north west][inner sep=0.75pt]  [font=\scriptsize,color={rgb, 255:red, 0; green, 0; blue, 255 }  ,opacity=1 ]  {$n=2$};
% Text Node
\draw (341,128.72) node [anchor=north west][inner sep=0.75pt]  [font=\scriptsize]  {$m=1$};
% Text Node
\draw (336,109.72) node [anchor=north west][inner sep=0.75pt]  [font=\scriptsize]  {$m=2$};
% Text Node
\draw (328,90.72) node [anchor=north west][inner sep=0.75pt]  [font=\scriptsize]  {$m=3$};
% Text Node
\draw (267,22.32) node [anchor=north west][inner sep=0.75pt]   [align=left] {Infinity};
% Text Node
\draw (223.68,137.22) node [anchor=north west][inner sep=0.75pt]  [font=\scriptsize,color={rgb, 255:red, 65; green, 117; blue, 5 }  ,opacity=1 ]  {$K_{11}$};
% Text Node
\draw (258.18,137.22) node [anchor=north west][inner sep=0.75pt]  [font=\scriptsize,color={rgb, 255:red, 0; green, 0; blue, 255 }  ,opacity=1 ]  {$K_{12}$};
% Text Node
\draw (251.18,117.22) node [anchor=north west][inner sep=0.75pt]  [font=\scriptsize,color={rgb, 255:red, 0; green, 0; blue, 255 }  ,opacity=1 ]  {$K_{22}$};
% Text Node
\draw (214.68,117.22) node [anchor=north west][inner sep=0.75pt]  [font=\scriptsize,color={rgb, 255:red, 65; green, 117; blue, 5 }  ,opacity=1 ]  {$K_{21}$};
% Text Node
\draw (225.18,97.22) node [anchor=north west][inner sep=0.75pt]  [font=\scriptsize,color={rgb, 255:red, 0; green, 0; blue, 255 }  ,opacity=1 ]  {$K_{32}$};

\end{tikzpicture}

\end{document}

The case not working:

\begin{document} 


\tikzset{every picture/.style={line width=0.75pt}} %set default line width to 0.75pt        

\begin{tikzpicture}[x=0.75pt,y=0.75pt,yscale=-1,xscale=1]
%uncomment if require: \path (0,290); %set diagram left start at 0, and has height of 290

%Shape: Axis 2D [id:dp0999179114900497] 
\draw [line width=1.5]  (58.1,259.06) -- (280.1,259.06)(80.3,63) -- (80.3,280.84) (273.1,254.06) -- (280.1,259.06) -- (273.1,264.06) (75.3,70) -- (80.3,63) -- (85.3,70)  ;
%Shape: Block Arc [id:dp9040753340201015] 
\draw  [line width=1.5]  (134.63,145.52) .. controls (166.09,160.7) and (190.28,188.67) .. (200.49,222.7) -- (123.98,245.85) .. controls (120.29,233.41) and (111.53,223.19) .. (100.13,217.62) -- cycle ;
%Straight Lines [id:da32946654832604994] 
\draw [line width=1.5]  [dash pattern={on 1.69pt off 2.76pt}]  (272,200.84) -- (80.3,259.06) ;
%Straight Lines [id:da08659465846330194] 
\draw [line width=1.5]  [dash pattern={on 1.69pt off 2.76pt}]  (80.3,259.06) -- (156,100.84) ;
%Shape: Block Arc [id:dp2245060381299795] 
\draw  [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]  (114.09,137.81) .. controls (147.71,147.3) and (176.38,170.64) .. (192.35,202.38) -- (121.02,238.46) .. controls (115.23,226.86) and (104.83,218.31) .. (92.63,214.81) -- cycle ;
%Straight Lines [id:da8775400636749446] 
\draw [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]  [dash pattern={on 1.69pt off 2.76pt}]  (80.3,259.06) -- (263,166.84) ;
%Straight Lines [id:da9623658878312962] 
\draw [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]  [dash pattern={on 1.69pt off 2.76pt}]  (80.3,259.06) -- (131,75.84) ;

%Straight Lines [id:da10914044989535521] 
\draw [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]    (160,176.84) -- (178.93,157.01) ;
\draw [shift={(181,154.84)}, rotate = 133.67] [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]    (14.21,-4.28) .. controls (9.04,-1.82) and (4.3,-0.39) .. (0,0) .. controls (4.3,0.39) and (9.04,1.82) .. (14.21,4.28)   ;
%Straight Lines [id:da28688187191709646] 
\draw [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]    (106,232.84) -- (121.94,216.02) ;
\draw [shift={(124,213.84)}, rotate = 133.45] [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]    (14.21,-4.28) .. controls (9.04,-1.82) and (4.3,-0.39) .. (0,0) .. controls (4.3,0.39) and (9.04,1.82) .. (14.21,4.28)   ;
%Straight Lines [id:da009188025421678514] 
\draw [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]    (151,246.84) -- (136.28,215.56) ;
\draw [shift={(135,212.84)}, rotate = 64.8] [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]    (14.21,-4.28) .. controls (9.04,-1.82) and (4.3,-0.39) .. (0,0) .. controls (4.3,0.39) and (9.04,1.82) .. (14.21,4.28)   ;
%Straight Lines [id:da9125246998149943] 
\draw [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]    (117,199.34) -- (84.86,189.24) ;
\draw [shift={(82,188.34)}, rotate = 17.45] [color={rgb, 255:red, 255; green, 0; blue, 0 }  ,draw opacity=1 ][line width=1.5]    (14.21,-4.28) .. controls (9.04,-1.82) and (4.3,-0.39) .. (0,0) .. controls (4.3,0.39) and (9.04,1.82) .. (14.21,4.28)   ;

% Text Node
\draw (177.47,210.24) node [anchor=north west][inner sep=0.75pt]  [font=\footnotesize,rotate=-64.02]  {$A_{1}$};
% Text Node
\draw (146.13,174.92) node [anchor=north west][inner sep=0.75pt]  [rotate=-31.55]  {$A_{2}$};
% Text Node
\draw (110.07,154.52) node [anchor=north west][inner sep=0.75pt]  [font=\footnotesize,rotate=-17.11]  {$A_{3}$};
% Text Node
\draw (266,150.4) node [anchor=north west][inner sep=0.75pt]    {$\textcolor[rgb]{1,0,0}{\varphi }\textcolor[rgb]{1,0,0}{_{1}}\textcolor[rgb]{1,0,0}{+\si{\ohm}}\textcolor[rgb]{1,0,0}{_{\mathrm{P}}}\textcolor[rgb]{1,0,0}{\delta t}$};
% Text Node
\draw (94,60.4) node [anchor=north west][inner sep=0.75pt]    {$\textcolor[rgb]{1,0,0}{\varphi }\textcolor[rgb]{1,0,0}{_{2}}\textcolor[rgb]{1,0,0}{+\si{\ohm}}\textcolor[rgb]{1,0,0}{_{\mathrm{P}}}\textcolor[rgb]{1,0,0}{\delta t}$};
% Text Node
\draw (278,259.74) node [anchor=north west][inner sep=0.75pt]    {$x$};
% Text Node
\draw (64,65.74) node [anchor=north west][inner sep=0.75pt]    {$y$};
% Text Node
\draw (157,81.4) node [anchor=north west][inner sep=0.75pt]    {$\varphi _{2}$};
% Text Node
\draw (123.02,241.86) node [anchor=north west][inner sep=0.75pt]    {$r_{1}$};
% Text Node
\draw (199.49,219.1) node [anchor=north west][inner sep=0.75pt]    {$r_{2}$};
% Text Node
\draw (275,188.4) node [anchor=north west][inner sep=0.75pt]    {$\varphi _{1}$};
% Text Node
\draw (173,139.4) node [anchor=north west][inner sep=0.75pt]    {$\textcolor[rgb]{1,0,0}{v}\textcolor[rgb]{1,0,0}{_{r}}$};
% Text Node
\draw (151,234.4) node [anchor=north west][inner sep=0.75pt]    {$\textcolor[rgb]{1,0,0}{v}\textcolor[rgb]{1,0,0}{_{\varphi }}$};
% Text Node
\draw (116,198.4) node [anchor=north west][inner sep=0.75pt]    {$\textcolor[rgb]{1,0,0}{v}\textcolor[rgb]{1,0,0}{_{r}}$};
% Text Node
\draw (82,166.4) node [anchor=north west][inner sep=0.75pt]    {$\textcolor[rgb]{1,0,0}{v}\textcolor[rgb]{1,0,0}{_{\varphi }}$};


\end{tikzpicture}
\end{document}

Support for tikz-timing package.

Hello, Is it possible to support tikz-timing?

Advanced Slides Integration

Hello,

I really love this fantastic package:)
However, to make it maximum useful for me, I need an easy way to use my TikZ Graphics in an Obsidian Advanced Slides Presentation.
Could anyone think of a feasible way to do that?

Currently the only way I can think of is Copying the SVG tag and manually pasting it in the presentation. Which is not very handy and does not allow to 'include' TikZ from other Notes.

Add syntax highlighting

Support usage in math blocks (or why not)

Hi, love the plugin and I've been having fun making drawings n stuff. However, it could be so much better if tikz commands could be used inside math blocks instead of code blocks. This would unlock inline graphics which would be immensly useful!
I understand that this may not be possible due to the limitations of tikzjax, if so could you give an explanation of why not?

Thanks for the amazing work so far :)

Can I save the rendered image as an svg image?

Is there a way to get the rendered .svg image?
I want to insert the .svg images rendered by the plugin into the .md file so that my document has better compatibility.
For example, I can more easily post on my blog or use the advanced slides plugin to create slides.

tan not working

Hi I have this code right now:

\begin{document}
  \begin{tikzpicture}[domain=-pi:pi]
    \draw[very thin,color=gray] (-pi,-pi) grid (pi,pi);
    \draw[->] (-0.2,0) -- (pi+0.2,0) node[right] {$x$};
    \draw[->] (0,-1.2) -- (0,pi+0.2) node[above] {$f(x)$};
    \draw[color=red]    plot (\x,{tan(\x r)})      node[right] {$f(x) =\tan x$};
    \draw[color=blue]   plot ({tan(\x r)},\x)    node[right] {$f(x) = \arctan x$};
  \end{tikzpicture}
\end{document}

with result

if I remove the radiant sign "r" I get

which is not what I want.

Could u tell me what I am doing wrong or is the plugin not working

installation issues (web2js but relevant to instructions here)

Technically, this is an issue with web2js, but it's important enough that I feel I should mention it here as it may help make your installation instructions clearer, which would benefit any Obsidian users who are trying to use LaTeX. I'm currently trying to set up the version of this plugin that allows me to add my own LaTeX packages. I cloned the ww-modifications branch of web2js, and attempted to npm install, but I was stopped in my tracks by the following error message:

scks@badcalculator ~/web2js (master)> npm install node-kpathsea
npm WARN deprecated [email protected]: Package no longer supported. Contact [email protected] for more info.
npm ERR! code 1
npm ERR! git dep preparation failed
npm ERR! command /usr/bin/node /usr/lib/node_modules/npm/bin/npm-cli.js install --force --cache=/home/scks/.npm --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit --include=dev --include=peer --include=optional --no-package-lock-only --no-dry-run
npm ERR! > [email protected] install
npm ERR! > node-gyp rebuild
npm ERR! 
npm ERR! make: Entering directory '/home/scks/.npm/_cacache/tmp/git-clonef78ttp/build'
npm ERR!   CXX(target) Release/obj.target/kpathsea/src/kpathsea.o
npm ERR! make: Leaving directory '/home/scks/.npm/_cacache/tmp/git-clonef78ttp/build'
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! npm WARN old lockfile 
npm ERR! npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm ERR! npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm ERR! npm WARN old lockfile 
npm ERR! npm WARN old lockfile This is a one-time fix-up, please be patient...
npm ERR! npm WARN old lockfile 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | linux | x64
npm ERR! gyp info find Python using Python version 3.10.6 found at "/usr/bin/python3"
npm ERR! gyp info spawn /usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/usr/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/scks/.npm/_cacache/tmp/git-clonef78ttp/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/usr/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/scks/.cache/node-gyp/19.8.1/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/home/scks/.cache/node-gyp/19.8.1',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/usr/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/home/scks/.cache/node-gyp/19.8.1/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/home/scks/.npm/_cacache/tmp/git-clonef78ttp',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! In file included from ../src/kpathsea.cc:1:
npm ERR! ../src/node_kpathsea.h:4:10: fatal error: kpathsea/kpathsea.h: No such file or directory
npm ERR!     4 | #include <kpathsea/kpathsea.h>
npm ERR!       |          ^~~~~~~~~~~~~~~~~~~~~
npm ERR! compilation terminated.
npm ERR! make: *** [kpathsea.target.mk:113: Release/obj.target/kpathsea/src/kpathsea.o] Error 1
npm ERR! gyp ERR! build error 
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:203:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:512:28)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:293:12)
npm ERR! gyp ERR! System Linux 5.15.0-67-generic
npm ERR! gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd /home/scks/.npm/_cacache/tmp/git-clonef78ttp
npm ERR! gyp ERR! node -v v19.8.1
npm ERR! gyp ERR! node-gyp -v v9.3.1
npm ERR! gyp ERR! not ok 
npm ERR! npm ERR! code 1
npm ERR! npm ERR! path /home/scks/.npm/_cacache/tmp/git-clonef78ttp
npm ERR! npm ERR! command failed
npm ERR! npm ERR! command sh -c node-gyp rebuild
npm ERR! 
npm ERR! npm ERR! A complete log of this run can be found in:
npm ERR! npm ERR!     /home/scks/.npm/_logs/2023-03-15T22_07_33_046Z-debug-0.log

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/scks/.npm/_logs/2023-03-15T22_07_30_568Z-debug-0.log

The error is the same whether I enter this command or 'npm install' in the same web2js folder. My version of TeX includes kpathsea, so I don't understand what is going wrong. This message comes after I updated package.json to pull the appropriate version of node-kpathsea from Github. I'm at a loss for what to do at this point, since I am not experienced with node at all, so I would greatly appreciate some help. I apologize if there is an issue with asking about a dependency, but again, I think it would be useful if information about this could appear in the README and I wasn't sure whether it was appropriate to raise this issue on the web2js project.

Scaling does not work

When attempting to draw a lewis dot diagram using chemfig with the following code:

\usepackage{chemfig}

\begin{document}
\scalebox{4}{
    \chemfig{
		\Lewis{0.2:4:6.,S}
	}
}
\end{document}

This is produced:

I'm wondering why only the letter scales and not the dot.

Escaped dollar sign makes the diagram load indefinitely

I'm trying to create an economics graph using the pgfplots package but when I put the escaped dollar sign in the axis label the diagram loads indefinitely and I have to restart Obsidian to make the plugin render other diagrams again.

This is the latex that I wrote

\usepackage{pgfplots}

\begin{document}

\begin{tikzpicture}

\pgfplotsset{width=8cm,compat=1.9}
\tikzstyle{every node}=[font=\large]

\begin{axis}[
	axis lines=left,
	ticks=none,
    ymin=0,
    ymax=10,
    ylabel={Price (\$)},
	y label style={at={(axis description cs:-0.05,1)}, anchor=south east},
	xmin=0,
	xmax=10,
    xlabel={Quantity},
	x label style={at={(axis description cs:1,-0.05)}, anchor=north east},
	axis equal image,
	clip=false
]

\addplot[
	domain=0:9,
	style=very thick
]{5} node[right,pos=1] {D=AR=MR} node[left,pos=0] {P};

\end{axis}
\end{tikzpicture}
\end{document}

and this part seems to be the problem because when I delete $ and restart Obsidian, the diagram renders normally

ylabel={Price (\$)},

This is the expected output from Overleaf

Color inversion only sometimes being applied

I have a series of diagrams using tikz-cd. Some are always rendered correctly, however, some have their colors inverted in preview mode, while in reading mode they appear to not be inverted.

In preview mode:

In reading mode:

The tex for the diagrams is:

\usepackage{tikz-cd}
\usetikzlibrary{automata, arrows.meta, positioning}

\tikzstyle{accepting}=[double distance=4pt, outer sep=1pt+\pgflinewidth]

\begin{document}

\begin{tikzpicture} [node distance = 5cm, on grid, auto, scale=1, every node/.style={scale=1.3}]

	\node (qinit) [state, initial] {$q_{init}$};
	\node (qaccept) [state, accepting, right = of qinit] {$q_{accept}$};
	\node (qreject) [state, accepting, below = of qinit] {$q_{reject}$};
	\node (q1) [state, right = of qreject] {$q_1$};
	\node (q2) [state, below = of qreject] {$q_2$};
	\node (q3) [state, left = of qreject] {$q_3$};


\path[-stealth, thick]
	(qinit) edge node {$\sqcup / \sqcup / \to$} (qaccept)
	(qinit) edge[bend left] node [swap] {$b / \sqcup / \to$} (qreject)
	(qinit) edge[controls={+(3,-2) and +(0,4)}] node {$a/\sqcup/\to$} (q1)
	(q1) edge[loop right] node {$a/a/\to$} ()
	(q1) edge[loop left] node {$b/b/\to$} ()
	(q1) edge[bend left] node {$\sqcup / \sqcup / \leftarrow$} (q2)
	(q2) edge[bend right] node [swap] {$\sqcup / \sqcup / \to$} (qreject)
	(q2) edge[bend left] node {$a / \sqcup / \to$} (qreject)
	(q2) edge[bend left] node {$b / \sqcup / \leftarrow$} (q3)
	(q3) edge[loop right] node {$b/b/\leftarrow$} ()
	(q3) edge[loop left] node {$a/a/\leftarrow$} ()
	(q3) edge[bend left] node {$\sqcup / \sqcup / \to$} (qinit);

\end{tikzpicture}
\end{document}

I'm also getting this issue with all examples shown on this repository, although, some of my diagrams have never had an issue, dispute being fairly similar, such as:

\usepackage{tikz-cd}
\usetikzlibrary{automata, arrows.meta, positioning}

\tikzstyle{accepting}=[double distance=4pt, outer sep=1pt+\pgflinewidth]

\begin{document}

\begin{tikzpicture} [node distance = 3cm, on grid, auto, scale=1, every node/.style={scale=1.3}]

	\node (q0) [state, initial, accepting, initial text = {start}] {$q_0$};
	\node (q1) [state, right = of q0] {$q_1$};
	\node (q2) [state, right = of q1] {$q_2$};

\path[-stealth, thick]
	(q0) edge[bend left] node {1} (q1)
	(q0) edge [loop above] node {0} ()
	(q1) edge[bend left] node {1} (q0)
	(q2) edge[bend left] node {0} (q1)
	(q2) edge [loop above] node {1} ()
	(q1) edge[bend left] node {0} (q2);
\end{tikzpicture}

\end{document}

and

\usepackage{tikz-cd}
\usetikzlibrary{automata, arrows.meta, positioning}

\tikzstyle{accepting}=[double distance=4pt, outer sep=1pt+\pgflinewidth]

\begin{document}

\begin{tikzpicture} [node distance = 5cm, on grid, auto, scale=1, every node/.style={scale=1.3}]

	\node (s) [state, initial] {$s$};
	\node (f) [state, below right = of s] {$f$};
	\node (q) [state, accepting, above right = of f] {$q$};

\path[-stealth, thick]
	(s) edge[bend left] node {a} (q)
	(s) edge[controls={+(1.5,0.1) and +(-2,-0.8)}] node {b} (q)
	(s) edge[bend left] node {b} (f)
	(f) edge[bend left] node {b} (s)
	(q) edge[bend left] node {a} (f)
	(f) edge[in=290, out=350, loop] node {a} ()
	(f) edge[in=190, out=250, loop] node {b} ();
\end{tikzpicture}

\end{document}

I'm not sure where the issue is, as I have also found that when altering certain parts of the tex such as setting \begin{tikzpicture} [color=white] the issue is resolved until the obsidian app is restarted. Similarly, changing \usepackage{tikz-cd} to \usepackage{tikz} and back resolves the issue until obsidian is restarted,

This is on the latest version of obsidian, and persists across Android, Windows, and Linux.

Please let me know if I can help or if there's any information I missed.

\Omega is not rendered

A super weird bug 🤣: \Omega is not rendered. A minimal working example:

\begin{document}
\begin{tikzpicture}
\draw (0,0) node {$x\omega\Omega\Gamma$};
\end{tikzpicture}
\end{document}

The result is $x\omega\Gamma$, the $\Omega$ is missing 😂

Support for the tikzlibrary: feynman

Would it be possible to add support for the tikz feynman to Obsidian TikzJax?

Obsidian Publish Not Rendering Diagrams

Hello,

I am using Obsidian Publish to make course notes available to students in my class. I am using the community plugin TikZJax to render diagrams. These work fine in both editing and reading mode, but fail to render when I publish to my site. Do I need to include the plugin when publishing? Screenshots of what I’m seeing are blow. Any help is greatly appreciated!

Editing Mode:

Reading Mode:

Published Site:

Support Offline Operation

Currently, Obsidian Tikzjax fetches TikZJax from a CDN. This means that if the internet is unavailable for whatever reason it's impossible to render diagrams. Would it be possible to include the script with the plugin?

Building with patched tikzjax.js

I am currently trying to build the plugin but whenever I try to display a block of TikZ code, I get an error and the graphic only gets displayed if it has been cached before.
I would like to be able to use a patched tikzjax.js in order to add, replace and remove packages.

The steps I took for building the plugin:

Clone artisticat1/tikzjax and switch to output-single-file branch
Run 'npm install' and 'npm run build'
Clone artisticat1/obsidian-tikzjax
Copy tikzjax.js from artisticat1/tikzjax/dist to the root of artisticat1/obsidian-tikzjax
Run 'npm install' and 'npm run build'
Create new plugin directory in VAULT/.obsidian/plugins and copy main.js, manifest.json and styles.css into that directory

The error and debug messages

Unable to load tex.wasm.gz. File not available.
TikZJax: Rendering input:
tikz code
TypeError: Cannot read properties of undefined (reading 'slice')
at texify (...:1:6874054)
at ...:1:4701297
at Generator.next ()
at ...:1:4699826
at new Promise ()
at e (...:1:4699571)
at O (...:1:4701251)
at ...:1:4702369
at f (...:1:4699374)
GET app://invalid.site/img-not-found.png net::ERR_FILE_NOT_FOUND

The second error message appears every time an uncached TikZ block tries to render.

Is there support for additional unicode symbols

The following characters were verified to produce a correct tikz-cd rendering

Simplified Chinese character
uncommon character:⊆,≅,⟛

Although the uncommon characters can be replaced by latex syntax, if direct input can be supported, the output efficiency will be greatly improved
Plug-in providers are kindly requested to refer to this suggestion.

Unable to render circuittikz's Op amp diagram

Hi, I have been using this plugin for quite a while. Everything is working fine with circuittikz package. Until recently, I need to draw an op amp diagram for a circuit but it keep loading, never able to render the circuit.

Here is my code for op amp:

\usepackage{circuitikz} 
\begin{document} 
\begin{circuitikz}
\draw (0,0) node[op amp]{};
\end{circuitikz} 
\end{document}

I have tried other complicated components but there aren't any problems. I have also tried to rearrange the code different way, but nothing works. Usually, when the diagram keep loading without any result (which also a problem), all I have to do is to restart the obsidian and everything will be fine but not for the op amp.

Can't set charges within chemfig

Using say \chemfig{A^+-[2]B} which should look like:

however it fails to display.
It seems like the support for adding charges to atoms is lacking, including the \charge macro

Support User Packages

Pertinent to our discussion in #3, it would be great to support user packages. I know that I, for one, would love to have support for the various \mathbb and \mathcal letters.

I think the most sensible approach is as follows:

Allow users to specify a directory of packages in the plugin settings.
When loading the bundled packages, also check that directory for packages and load them. Afaict this should be fine to do as we'll have access to app at the point we need it.

I'm very happy to have a go at this, but it makes sense for me to wait for #3 to be finalised first as it'll touch lots of the same stuff.

Support for bayesnet package

Great plugin, many thanks!

Is there a way to use usetikzlibrary to load a tikz library such as bayesnet?

I've tried the following code, but it doesn't render in Obsidian:

\usetikzlibrary{bayesnet}
\begin{document}
\begin{tikzpicture}
\node[obs]	(y)      {$y$} ; %
\node[obs, above=of y]        		(x2)      {$x_2$} ; %
\node[obs, left=of x2]        		(x1)      {$x_1$} ; %
\node[obs, right=of x2]       		(z)      {$z$} ; %
\edge[-,dashed] {x2} {z} ; %
\edge {x1,z} {y} ; %
\end{tikzpicture}
\end{document}

Align image

Just downloaded this plugin and I'm pretty new to latex, so I don't know if there's an obvious answer to this question. I'm trying to align the image generated from \begin{tikzpicture} to the left, not just nodes or equations but the whole image. I've searched on google but none of the results helped. Any response would be appreciated, thanks.

Improvement

Im hoping you could add to the readme how to install this. I dont see it on either the obsidian plugin store nor BRAT

Is it possible to use pfgplots library

I have a vector field created with \addplot3 and I would like to colour it. I am following this blog post https://latexdraw.com/plot-vector-field-in-latex-tikz/
and everything is fine until I reach the point of colouring the vector field. The plugin seems to be unable to use the preamble

\usepgfplotslibrary{colormaps}

Since we can use pgfplots, I am wondering if this additional preamble should be done differently or if it's simply not supported.

Thanks

3d plots not working correctly

When I use the pgfplots package and try to render a 3d plot with the function \addplot3, it doesn't show correctly with either the mesh option or the surf option.

Using a custom preamble

I'm able to render tikz-cd diagrams alright, and separately I'm able to use the Extended MathJax obsidian plugin to use commands from a custom preamble in inline equations. I'd like to be able to use custom commands in diagrams (like on nodes and arrow labels and whatnot).
I tried adding \input{preamble.sty} at the top of the tikz block but it can't find the file, and I'm not sure which relative directory is it going to search in. Is there a reliable way to make it work?

Is there a way to change the zoom?

I am testing this awesome plugin and it plot take a very limited part of the page. Is this something to fix with a css snipped or what?

Also is it possible to compile this in LaTex? I am new to LaTex, just want to make sure how much I am locking my notes using this plugin.

Thank you very much.

[Question] Memory Usage

Do you have any idea of the memory usage by the TikZJax worker? I'm running into consistent soft crashing on mobile with the plugin enabled and I wondered if you had any idea. I have not yet narrowed the crash down to Obsidian TikZJax; it could be a combination of plugins. I just figured it was worth asking before I have a moment to debug.

Adding the quantikz package

Everyone,

Adding the Quantikz package could be useful.
Any chance for this to happen?

Thanks.

```tikz

\usepackage{chemfig}
\begin{document}

\chemfig{@{a1}C-[@{db}::30]C-[::-60]X}

\chemmove{\draw(db).. controls +(100:5mm) and +(145:5mm).. (a1);}

\end{document}
```

Results in:
https://i.imgur.com/C3VREVD.png

Instead of: (Generated in pdflatex)

https://i.imgur.com/AvUTMA0.png

I think it has something to do with how tikz handles references. compiling this with texify.exe requires multiple passes.