I'm interested in having high-quality math diagrams on a personal website. I want the quality to be comparable to TikZ, but the workflows are cumbersome and it doesn't integrate with MathJax/KateX.
Ideally I would be able to produce the diagrams in JS with KaTeX handling rendering the labels, but this doesn't seem to exist (I'm a software engineer so I'm wondering if I should try to make it...). Nice features also include having the diagram being controllable by JS or animatable, but that's not a requirement.
What are other people using?
Things I've considered:
TikZ options:
* TikZ exported to SVG
* Writing the TikZ in something else, e.g. I found this library PyTikZ which is old but I could update things to it, that way at least I don't have to wrangle TikZ's horrible syntax much myself. I could theoretically write a JS version of this.
* Maybe the same thing, JS -> TikZ, but also run TikZ in WebAssembly so that the whole thing lives in the browser.
* Writing TikZ but ... having ChatGPT do it so I don't have to learn to antiquated syntax.
Non-TikZ options:
* InkScape
* JSXGraph, but it isn't very pretty
* ???
Thanks for your help!
For example, draw math diagrams, etc. online free with Mathcha https://www.mathcha.io/
I am interested in the results, as I have supported (and barely used) the eqn/grap/pic/troff package and LaTeX.
I have been using it to produce images for my book and am very happy with it. There is tutorial here that shows you the syntax [3].
[1] https://pypi.org/project/pytikz/
[2] https://github.com/allefeld/pytikz
[3] https://nbviewer.org/github/allefeld/pytikz/blob/master/pyti...
Saved me hours in undergrad, was what everyone at Stanford used for quickly communicating ideas and typing up :)
If you're going to build something in JS, you'd have to decide how a wide diagram should adjust to render legibly on a narrower viewport (mobile), and that sounds rough.
InkScape is a vector drawing program. Do you want to put interactive graphics on your site or just some SVG/PNGs? If you want to create just some graphics, Sagemath should do the job: https://sagecell.sagemath.org/
"Writing TikZ but ... having ChatGPT do it so I don't have to learn to antiquated syntax."
A software engineer should be able to use Latex and I see nothing antiquated about it. I am writing a (non scientific) book soon. I would consider nothing else.
Also maybe Mathbox. https://github.com/unconed/mathbox From Steve Wittens / Acko.net. ( See also https://acko.net/blog/mathbox2/ )
It works well, but you have to figure out the markup and dynamically styling the images are difficult; For example, to make darkmode work, I have to apply css filters over the generated svgs.
It also doesn't show anything if javascript is not enabled, so I duplicate the contents into a noscript tag as part of my site's "build" process so users can at least know a tikz diagram is supposed to be there.
I have an entire custom build process though, so that might be why it was straightforward for me to incorporate it.
I eventually settled on using Goodnotes on my iPad, drawing them by hand and just exporting the images.
Feedback would be greatly welcome! It's made specifically for the usecase you mention, blog-like website with Katex to add pretty graphics. Example usage:
<!-- Draw a triangle with labels on the sides and angles -->
<vector-graph x="3" y="3" axis="false">
<polygon points="0,0;1,3;3,1" sides="a,b,c" angles="α,β,γ"></polygon>
</vector-graph>
<!-- a + b = c, but in vector form (with lots of labels) -->
<vector-graph x="4.9" y="4.9">
<vector label="b" color="blue" from="3,4" to="4,2" axis></vector>
<vector label="a" color="red" from="0,0" to="3,4" axis></vector>
<vector label="c" from="0,0" to="4,2"></vector>
</vector-graph>
Edit: note that the examples in the website, since they are part of the README in Github, are plain SVG images that have been rendered on the backend statically also by VectorGraph, see the Node.js environment if interested:
I.. uh.. don't know what to tell you. There is nothing not antiquated about it. It could, for instance, use a sane syntax for literally anything (I think only the raw math is acceptable; everything else is crazy). It could be written in a modern language that people can easily modify. Etc.
But TikZ in particular is more of a programming language than LaTeX is and really ought to be written in something closer to Python or JS.
TikZ is great in terms of the quality of the output, but I really don't want a "toolchain" for my site. Ideally the code for the graphics would be directly inline in a markdown file. I don't want a bunch of assets that I have to keep track of.
Plus, TikZ images render their TeX themselves, so you can't have KaTeX do it. This means you lose the benefits e.g. custom macros that you use everywhere, being able to change the math inline in the document if you rename a variable or something, or having all the math on the page scale the same way.
Of course, were I writing a book, I would use LaTeX. But I'm not. The needs for a casual website are very different. In particular I want fast iteration times, including on making edits to all of the graphics, which means that having them inline is much more ergonomic.
How big does the resulting binary get?
edit: oh, looked at the demo on https://tikzjax-demo.glitch.me/ and it seems like it is just a couple MB. Not bad.
https://opensource.stackexchange.com/a/4877
What the AGPL does differently compared to e.g. GPL is basically say that you cannot build a proprietary service around my library without making that service open source as well. So theoretically, it could be argued that depending on how you use it in your website, you would need to make your website free software as well. Or, buy a license. (Or in this case, get an exception from me). This is just a friendly explanation, the full legal terms are here:
https://github.com/franciscop/vector-graph/blob/master/LICEN...
I learned about this from the first linked post, immediately tried it and never looked back.
emscripten-forge builds things with emscripten to WASM packages. [4]
JupyterLite supports micropip (`import micropip; await micropip.install(["pandas",])`).
Does micromamba work in JupyterLite notebooks?
"DOC: How to work with emscripten-forge in JupyterLite" https://github.com/emscripten-forge/recipes/issues/699
[1] https://github.com/jrjohansson/ipython-asymptote/tree/master
[2] examples: https://notebook.community/jrjohansson/ipython-asymptote/exa...
Manim example gallery: https://docs.manim.community/en/stable/examples.html
From >>38019102 re: Animated AI, ManimML:
> Manim, Blender, ipyblender, PhysX, o3de, [FEM, CFD, [thermal, fluidic,] engineering]: https://github.com/ManimCommunity/manim/issues/3362
It actually looks like pygame-web (pygbag) supports panda3d and harfang in WASM, too; so manim with pygame for the web.
You also won't have something nice like $$ or \[ \] and will have to put the
<script type="text/tikz">
\begin{tikzpicture}
...
\end{tikzpicture}
</script>
I love that it uses exactly 1 WebComponent. I love / am vaguely confused that it doesn't read the component's own DOM but instead gets the `.outerHTML`: https://github.com/franciscop/vector-graph/blob/master/index...
I guess that it means that the actual rendering gets fully decoupled from the live, but hidden DOM tree within the WebComponent and that live DOM tree doesn't really matter aside from first render.
RIP Gilles
Once we get arbitrary expression constraints you'll be able to turn on the grid and trace points to plot equations, for example.
https://observablehq.com/@tomlarkworthy/robocoop-skills#mark...
If you give me a problem I can see if it can solve it
Yes, I'm not funded by the millions (like Khan Academy, the org that created/sponsored Katex) so I would hate to see all my hard work get copy/pasted by a company, rebranded as their own and sold to the public in a private manner.
> I don't want to think about licenses at all in my life
If you don't want to think about licenses ever it's just a one-time payment of $19, that's exactly why I dual-licensed it; follow the license, or pay $19 to not deal with the license.
> That makes me less interested, really
That's okay, if you don't think it's a library worth $19 (or following the license), it means it doesn't provide enough value for you to be worth of your money. For the average developer in the world that's less than 1h of their time though, so if you think that my library will save you 1h vs others, or vs doing it by hand, then it's "worth it". Many developers think all the tools should be MIT, and that is okay, but I don't share that ideology.
I'm not totally sure what you mean by "it doesn't read the component's own DOM but instead gets the `.outerHTML`". Note that I am not a Shadow DOM expert and I made this a couple of years ago, but IIRC the reason I made it this way is that I wanted a lot of flexibility on the transformation.
It's not 1-component-to-1-svg-element, it's more like I might have an arbitrary N number of "HTML elements", which might render into an arbitrary M number of "SVG elements", some of which might even be global (<defs>) so not even in the same order as the HTML elements order.
> I just want to tell everyone that Gilles Castel, the incredible person that popularized this form of math note taking, has passed away. It's awesome to see that people still use his blog and keep his legacy alive. We lost him at a very young age. Thank you for this video.
On why:
> depression got the better of him.
:(
1: https://www.youtube.com/watch?v=DOtM1mrWjUo&lc=UgyBCHtOu_8bl...
AGPL is a copyleft license, MIT is not. There’s good reasons for a developer to prefer copyleft.
https://casual-effects.com/markdeep/
...which supports LaTeX math via MathJax.
I’m also an enjoyer of web-components, I use them in my chrome extension Mobile View. I want to try this out tomorrow at work
I actually have a Twitter thread on it!
This pytikz package finally made tikz sane and pleasant. The best part is that control instructions like for loops, storing values in variables etc are done with python, and the tikz api calls are only made to actually put things on the screen.
This means, for example, that I can declare some color scheme for my book images once (by defining some python variables as color values), and then consistently use that scheme for all images.