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 :)
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.
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>
PS, I give you permission to use it in your personal website for free, alexkritchevsky.comEdit: 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:
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...
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.
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.
https://observablehq.com/@tomlarkworthy/robocoop-skills#mark...
If you give me a problem I can see if it can solve it
> 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 actually have a Twitter thread on it!