I can use mathjax for equations and symbols generally, but what about diagrams? Mathjax doesn't support TiKZ, so I'm looking for a JavaScript library which can be used in place of TiKZ. So far JSXGraph and two.js seem promising – I'm wondering if anybody can recommend or comment?
[Tex/LaTex] JavaScript library for producing TiKZ-like diagrams
diagramsjavascript
Related Solutions
Update: Improved code, and explanations and more examples added (after the first figure).
This is a "craftsman" solution, in which I fine-tuned a bit the control points for the bottom of the pit.
\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{decorations.pathmorphing,calc}
\begin{document}
\usetikzlibrary{decorations.pathmorphing,calc}
\begin{tikzpicture}
% Define some reference points
% The figure is drawn a bit bigger, and then clipped to the following dimensions:
\coordinate (clipping area) at (10, 7);
\clip (0,0) rectangle (clipping area);
% Next reference points are relative to the lower left corner of the clipping area
\coordinate (water level) at (0, 6);
\coordinate (bottom) at (5, 1.3); % (bottom of the pit)
\coordinate (ground1) at (0, 5); % (left shore)
\coordinate (ground2) at (10, 5); % (right shore)
% Coordinates of the bigger area really drawn
\coordinate (lower left) at ([xshift=-5mm, yshift=-5mm] 0,0);
\coordinate (upper right) at ([xshift=5mm, yshift=5mm] clipping area);
% Draw the water and ripples
\draw [draw=blue!80!black, decoration={bumps, mirror, segment length=6mm}, decorate,
bottom color=cyan!60!black, top color=blue!20!white]
(lower left) rectangle (water level-|upper right);
% Draw the ground
\draw [draw=brown!30!black, fill=brown]
(lower left) -- (lower left|-ground1) --
(ground1) .. controls ($(ground1)!.3!(bottom)$) and (bottom-|ground1) ..
(bottom) .. controls (bottom-|ground2) and ($(ground2)!.3!(bottom)$) ..
(ground2) -- (ground2-|upper right) -- (lower left-|upper right) -- cycle;
% \draw[dotted](0,0) rectangle (clipping area);
\end{tikzpicture}
\end{document}
Result:
Some explanations:
The figure is drawn bigger than the area shown, then it was clipped . This makes easier to draw the water and to remove the borders of the ground. In order to clarify this, you can reveal the clipping area by removing the line starting with
\clipand adding at the end of the figure the line:\draw[dotted](0,0) rectangle (clipping area);You'll get:
I made great use of intersection coordinate system, i.e.: the syntax
(node1|-node2), meaning "the coordinate located at the vertical ofnode1and the horizontal ofnode2, that is, located at(node1.x, node2.y)(if this syntax were possible in tikz)I defined a number of "reference points" to make easier the customization of the figure. For example, the figure can be made assymetrical changing the y coordinate of
ground2, For example:\coordinate (ground2) at (10, 3); % (right shore)(See the result after the following bullet)
The origin
(0,0)is located at the lower left corner of the clipping area, so that it is easier to add labels at specified points, but you can also use the named coordinates(bottom),(water level)and so on, and use relative coordinates to achieve greater simplicity and flexibility. For example:\draw[>=stealth, <->] (bottom) -- (bottom|-water level) node[right, midway] {7m}; \draw[>=stealth, <-] ([shift={(-3mm,-8mm)}] ground2) -- +(-1,2) node[above] {Plateau};The result of adding these lines (and also changing the vertical position of
(ground2)is the following:
One option would be to use a description arrow with draw=none:
\documentclass{article}
\usepackage{tikz-cd}
\tikzset{commutative diagrams/.cd,
mysymbol/.style={start anchor=center,end anchor=center,draw=none}
}
\newcommand\MySymb[2][?]{%
\arrow[mysymbol]{#2}[description]{#1}}
\begin{document}
\[
\begin{tikzcd}
A \MySymb{dr}\arrow{d}[swap]{\beta} & K_h \MySymb{dr}\arrow{l}[swap]{\pi'} \arrow{d}[swap]{\gamma} \arrow{r}{\pi} & A \arrow{d}{\alpha} & & \\
F(A) & F(K_h) \arrow{l}{F(\pi')} \arrow{r}[swap]{F(\pi)} & F(A) & \end{tikzcd}
\]
\end{document}
A new style was defined using start anchor=center,end anchor=center,draw=none options (thanks to Qrrbrbirlbel for this suggestion); this style was used for the command \MySymb which uses a description arrow, and has one mandatory argument for the arrow direction specification and one optional argument for the symbol to be used (default symbol=?).
Best Answer
https://github.com/kisonecat/tikzjax is a JavaScript library which renders TikZ images. When
<head>includesthen code in the body like
is converted to the expected SVG. This works by running TeX itself in the browser (specifically, web2js is a Pascal compiler written to compile TeX to WebAssembly).