zlacker

Ask HN: What's the state of the art for drawing math diagrams online?

submitted by ajkjk+(OP) on 2023-11-20 17:44:51 | 147 points 60 comments
[source] [go to bottom]

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!


NOTE: showing posts with links only show all posts
1. k310+oa[view] [source] 2023-11-20 18:20:44
>>ajkjk+(OP)
I understand what you’re saying, but when I did the usual “What does the internet say about this?”, search interpreted it to mean “How can I draw mathematical diagrams online?” rather than “How can I draw mathematical diagrams to post online?”

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.

2. mike98+Ic[view] [source] 2023-11-20 18:29:29
>>ajkjk+(OP)
In case you are not aware of these awesome posts

https://castel.dev/post/lecture-notes-2/

https://castel.dev/post/lecture-notes-1/

3. darkna+ng[view] [source] 2023-11-20 18:41:59
>>ajkjk+(OP)
Have you tried Mermaid?

https://mermaid.js.org/

4. montal+qh[view] [source] 2023-11-20 18:45:23
>>ajkjk+(OP)
Penrose looks pretty good:

https://github.com/penrose/penrose

>>23430282

5. abdull+wh[view] [source] 2023-11-20 18:45:42
>>ajkjk+(OP)
The pytikz package on pypi [1] is not good. There is another package by the same name available on github [2] that is very nice to work with.

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...

6. foxmod+Oj[view] [source] 2023-11-20 18:53:30
>>ajkjk+(OP)
100% I recommend quiver (https://q.uiver.app) for commutative diagrams. Very simple interface, exports to TikZ.

Saved me hours in undergrad, was what everyone at Stanford used for quickly communicating ideas and typing up :)

7. xeonmc+7m[view] [source] 2023-11-20 19:02:19
>>ajkjk+(OP)
What we need is a modernized toolchain for Asymptote[0] that can run in the browser in realtime like MathJax, it has much nicer syntax than TikZ.

[0] https://asymptote.sourceforge.io/

9. Beijin+9n[view] [source] 2023-11-20 19:06:43
>>ajkjk+(OP)
I am not sure I understand your post. Have not head about TikZ but looks great. Should not be hard to integrate into a sever script that does eps output.

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.

10. geneze+xp[view] [source] 2023-11-20 19:16:18
>>ajkjk+(OP)
Somewhat related but focused on animated diagrams, Manim: https://github.com/3b1b/manim From 3Brown1Blue, used in their maths videos.

Also maybe Mathbox. https://github.com/unconed/mathbox From Steve Wittens / Acko.net. ( See also https://acko.net/blog/mathbox2/ )

11. thdc+et[view] [source] 2023-11-20 19:29:21
>>ajkjk+(OP)
I use TikZJax https://tikzjax.com/ (wasm tikz).

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.

15. franci+pD[view] [source] 2023-11-20 20:07:11
>>ajkjk+(OP)
I made https://vector-graph.com/ a while back and documented it pretty thoroughly. While I never "finished" it, it's working pretty fine and as long as you fix it to a specific version, you won't have to worry about changes if/when I continue working on 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.com
◧◩◪
18. franci+3I[view] [source] [discussion] 2023-11-20 20:23:47
>>culi+CF
`<vector-graph>` itself is a properly defined WebComponent, everything else inside is just parsed as a string of pseudo-html and rendered within the parent web component (as an SVG).

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:

https://vector-graph.com/#nodejs

20. vitors+MJ[view] [source] 2023-11-20 20:29:56
>>ajkjk+(OP)
Just plain old draw.io:

https://www.drawio.com/doc/faq/math-typesetting

◧◩
25. ajkjk+bM[view] [source] [discussion] 2023-11-20 20:40:05
>>thdc+et
Ah interesting, I'll check it out. I figured this had to exist! It might be ideal --- I'm on a github-pages Jekyll site and I like how simple that is, but it means I can't do anything server-side at all, not even making custom Jekyll plugins.

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.

◧◩◪
27. franci+SQ[view] [source] [discussion] 2023-11-20 20:59:50
>>ajkjk+SJ
It's dual-licensed as AGPL (free software) and commercial (with a one-time $19 fee), the AGPL is pretty restrictive so if you want a more liberal one you could buy it. But, as a 3rd option exclusive for you in here, you can use it for free in your own website without having to comply with the AGPL. See a longer-form explanation:

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...

◧◩
30. westur+e11[view] [source] [discussion] 2023-11-20 21:42:28
>>xeonmc+7m
ipython-asymptote [1][2] probably supports Jupyter Retro (now built on the same components as JupyterLab) but not yet JupyterLite with the pyodide WASM kernel:

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...

[3] https://jupyterlite.readthedocs.io/en/stable/#altair

[4] https://github.com/emscripten-forge/recipes

◧◩
31. westur+I31[view] [source] [discussion] 2023-11-20 21:54:28
>>geneze+xp
Manim-sideview VSCode extension w/ snippets and live preview: https://github.com/Rickaym/Manim-Sideview

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.

◧◩◪◨
34. ble+za1[view] [source] [discussion] 2023-11-20 22:33:32
>>franci+3I
Very nice looking diagrams for the amount of effort required to make them as a client of the library.

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.

35. kisone+lb1[view] [source] 2023-11-20 22:37:45
>>ajkjk+(OP)
I wrote https://github.com/kisonecat/tikzjax for running tikz in the browser with webassembly, but I have work to do to make it work better.
◧◩
37. eyegor+qd1[view] [source] [discussion] 2023-11-20 22:49:08
>>xeonmc+7m
https://katex.org/ may work?
40. tlarkw+Pi1[view] [source] 2023-11-20 23:17:24
>>ajkjk+(OP)
The markdown skill of roboco-op can do katex, I've not pushed it too hard but you can train it fairly quickly and because it lives in a JS observable notebook you can connect it reactively to normal coding and debugger and correct the LLM of any mistakes it makes (which it then jams from).

https://observablehq.com/@tomlarkworthy/robocoop-skills#mark...

If you give me a problem I can see if it can solve it

◧◩◪
43. esafak+Cr1[view] [source] [discussion] 2023-11-21 00:11:49
>>vitors+rL
yep https://github.com/mermaid-js/mermaid/issues/2776
44. quenix+ht1[view] [source] 2023-11-21 00:22:58
>>ajkjk+(OP)
I like Mathcha for a WYSIWYG option.

https://www.mathcha.io/

◧◩◪◨
47. RomanH+DT1[view] [source] [discussion] 2023-11-21 03:21:28
>>Beijin+N31
From someone who apparently knew him personally^1:

> 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...

◧◩◪◨⬒
48. buzzy_+k02[view] [source] [discussion] 2023-11-21 04:10:17
>>ajkjk+to1
Since you said you don’t know much about licenses, I suggest you check out https://writefreesoftware.org/learn/copyleft

AGPL is a copyleft license, MIT is not. There’s good reasons for a developer to prefer copyleft.

49. binary+a12[view] [source] 2023-11-21 04:14:58
>>ajkjk+(OP)
Not sure if it's considered "state of the art", but I've always liked markdeep:

https://casual-effects.com/markdeep/

...which supports LaTeX math via MathJax.

50. hoseja+7t2[view] [source] 2023-11-21 08:18:13
>>ajkjk+(OP)
Not completely relevant but there's now https://vectorpea.com/ by the creator of Photopea
◧◩◪
53. franci+IW2[view] [source] [discussion] 2023-11-21 12:25:48
>>corn-d+2u2
Thanks! Like some of my other "big" projects, it's really modular, in the way it started very simple "let's see if I can draw lines", and then each extra "type" was just a bit extra over the existing core, and so now it has a lot of features! If I knew it'd grow to the current scope I might have been afraid and not even started TBH.

I actually have a Twitter thread on it!

https://twitter.com/FPresencia/status/1411196648177405953

[go to top]