====== TikZJax Plugin ======

---- plugin ----
description: 
author     : jpelc 
email      : admin@swpelc.eu
type       : 
lastupdate : 2025-01-12
compatible : 
depends    : 
conflicts  : 
similar    : 
tags       : 

downloadurl: https://github.com/kubakubakuba/dokuwiki-tikzjax/zipball/master
bugtracker : https://github.com/kubakubakuba/dokuwiki-tikzjax/issues
sourcerepo : https://github.com/kubakubakuba/dokuwiki-tikzjax
donationurl: 

screenshot_img : https://omega.swpelc.eu/dokuwiki/tikzjax/dokuwiki-tikzjax.png
----

Renders TikZ inside ''%%<tikzjax>%%'' code blocks using TikZJax.

===== Installation =====

Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.

===== Examples/Usage =====

See more info about TikZJax [[https://tikzjax.com/|here]], and benrbray's fork this plugin is based upon [[https://github.com/benrbray/tikzjax|here]], with live demo [[https://bill-ion.github.io/tikzjax-live/|here]].

===== Syntax =====

The TikZ code is written into ''%%<tikzjax>%%'' code blocks

Basic syntax:
<code>
<tikzjax>
\begin{document}
    \begin{tikzpicture}
        \draw (0,0) circle (1in);
     \end{tikzpicture}
\end{document}
</tikzjax>
</code>

{{https://omega.swpelc.eu/dokuwiki/tikzjax/tikzjax-1.png}}

or:
<code>
<tikzjax>
\usetikzlibrary{cd}
\begin{document}

\begin{tikzcd}
    A \arrow[r, "\phi"] \arrow[d, red]
      & B \arrow[d, "\psi" red] \\
    C \arrow[r, red, "\eta" blue]
      & |[blue, rotate=-15]| D
  \end{tikzcd}
  
\end{document}

</tikzjax>
</code>

{{https://omega.swpelc.eu/dokuwiki/tikzjax/tikzjax-2.png}}

or even this:
<code>
<tikzjax>
\usetikzlibrary{automata, positioning, arrows, calc}

\begin{document}

%from https://github.com/knedl1k/B4B01JAG

\tikzset{
->, % makes the edges directed
>=stealth', % makes the arrow heads bold
node distance=3cm, % specifies the minimum distance between two nodes. Change if necessary.
every state/.style={thick, fill=gray!10}, % sets the properties for each ’state’ node
initial text=$ $, % sets the text that appears on the start arrow
between/.style args={#1 and #2}{
         at = ($(#1)!0.5!(#2)$)
    },
}

    \begin{tikzpicture}
            \node[state, initial] (0) {$q_0$};
            \node[state, right of=0] (1) {$q_1$};
            \node[state, accepting, right of=1] (f) {$q_f$};
        
            \draw
                (0) edge[loop above] node[align=center]{$a, Z_0 / A Z_0$ \\ $a, A / AA$} (0)
                (0) edge[bend left, above] node{$b, Z_0 / Z_0$} (1)
                (0) edge[bend left, below] node{$b, A / A$} (1)
                (1) edge[loop above] node[align=center]{$a, Z_0 / Z_0$\\$b, Z_0, Z_0$} (1)
                (1) edge[loop below] node[align=center]{$a, A/AA$ \\ $b, B /BB$ \\ $a,B / \varepsilon$ \\ $b,A/\varepsilon$} (1)
                (1) edge[bend left, above] node{$\varepsilon, Z_0 / \varepsilon$} (f)
      
                ;
    \end{tikzpicture}

\end{document}
</tikzjax>
</code>

{{https://omega.swpelc.eu/dokuwiki/tikzjax/tikzjax-3.png}}
===== Development =====


The source code of the plugin is available at GitHub: https://github.com/kubakubakuba/dokuwiki-tikzjax.

=== Changelog ===

{{rss>https://github.com/kubakubakuba/dokuwiki-tikzjax/commits/main.atom date 8}}

=== Known Bugs and Issues ===

None yet.

=== ToDo/Wish List ===

Remove ''%%<tikzjax>%%'' entities, and process TikZ code automatically.

===== FAQ =====
Empty for now.