6 ms·

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

147 points by ajkjk 3y ago

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!

k310 3y ago
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/ 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.
mike986 3y ago
In case you are not aware of these awesome posts https://castel.dev/post/lecture-notes-2/ https://castel.dev/post/lecture-notes-2/ https://castel.dev/post/lecture-notes-1/ https://castel.dev/post/lecture-notes-1/
- PartiallyTyped 3y ago
  Wow. I wish I had known about this ...
- s1291 3y ago
  Unfortunately, he passed away in 2022. I loved his blog posts.
  - sidnb13 3y ago
    Wow, sorry to hear that. Came across his blog in 2021 and was instantly hooked. RIP
  - Beijinger 3y ago
    Do you know why he died? He must have been young.
    - RomanHauksson 3y ago
      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_8blA9Bj894AaABAg https://www.youtube.com/watch?v=DOtM1mrWjUo&lc=UgyBCHtOu_8bl...
      - Beijinger 3y ago
        Probably suicide. This is very unfortunate.
  - KeplerBoy 3y ago
    Damn, I remember reading his blog post a few years back when I was an undergraduate procrastinating on lab reports. I was instantly in awe of his writing and latex skills. RIP Gilles
- __rito__ 3y ago
  100% this. I learned about this from the first linked post, immediately tried it and never looked back.
darknavi 3y ago
Have you tried Mermaid? https://mermaid.js.org/ https://mermaid.js.org/
- vitorsr 3y ago
  Mermaid is unable to typeset math.
  - esafak 3y ago
    yep https://github.com/mermaid-js/mermaid/issues/2776 https://github.com/mermaid-js/mermaid/issues/2776
montalbano 3y ago
Penrose looks pretty good: https://github.com/penrose/penrose https://github.com/penrose/penrose https://news.ycombinator.com/item?id=23430282 https://news.ycombinator.com/item?id=23430282
abdullahkhalids 3y ago
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/ https://pypi.org/project/pytikz/ [2] https://github.com/allefeld/pytikz https://github.com/allefeld/pytikz [3] https://nbviewer.org/github/allefeld/pytikz/blob/master/pytikz.ipynb https://nbviewer.org/github/allefeld/pytikz/blob/master/pyti...
- ajkjk 3y ago
  Ah, [2] looks really interesting. Maybe the best option on this page since it seems to get all the expressivity of Tikz without the syntax? I'll check it out.
  - abdullahkhalids 3y ago
    I have probably made 100s of diagrams in tikz over the last 15 years. Every single time has been me trying to figure out the magic enchantment. 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.
    - ajkjk 3y ago
      god that sounds so nice. lol. I've been tortured by Tikz and that just sounds like... peace.
foxmoder 3y ago
100% I recommend quiver (https://q.uiver.app 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 :)
- Twisol 3y ago
  And Quiver itself exports to LaTeX that uses the `tikz-cd` package ("cd" for "commutative diagrams"), if you'd like to use that directly.
xeonmc 3y ago
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/ https://asymptote.sourceforge.io/
- westurner 3y ago
  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 https://github.com/emscripten-forge/recipes/issues/699 [1] https://github.com/jrjohansson/ipython-asymptote/tree/master https://github.com/jrjohansson/ipython-asymptote/tree/master [2] examples: https://notebook.community/jrjohansson/ipython-asymptote/examples/asymptote_magic_examples https://notebook.community/jrjohansson/ipython-asymptote/exa... [3] https://jupyterlite.readthedocs.io/en/stable/#altair https://jupyterlite.readthedocs.io/en/stable/#altair [4] https://github.com/emscripten-forge/recipes https://github.com/emscripten-forge/recipes
- eyegor 3y ago
  https://katex.org/ https://katex.org/ may work?
mapierce2 3y ago
I've resigning myself to letting diagrams on the web be images. (1) Design the diagram in TikZ, or anything really, (2) screenshot/crop it, (3) make its background transparent with imagemagick, and (2) convert to .webp 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.
Beijinger 3y ago
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/ 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.
- ajkjk 3y ago
  > I see nothing antiquated about it. 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.
genezeta 3y ago
Somewhat related but focused on animated diagrams, Manim: https://github.com/3b1b/manim https://github.com/3b1b/manim From 3Brown1Blue, used in their maths videos. Also maybe Mathbox. https://github.com/unconed/mathbox https://github.com/unconed/mathbox From Steve Wittens / Acko.net. ( See also https://acko.net/blog/mathbox2/ https://acko.net/blog/mathbox2/ )
- westurner 3y ago
  Manim-sideview VSCode extension w/ snippets and live preview: https://github.com/Rickaym/Manim-Sideview https://github.com/Rickaym/Manim-Sideview Manim example gallery: https://docs.manim.community/en/stable/examples.html https://docs.manim.community/en/stable/examples.html From https://news.ycombinator.com/item?id=38019102 https://news.ycombinator.com/item?id=38019102 re: Animated AI, ManimML: > Manim, Blender, ipyblender, PhysX, o3de, [FEM, CFD, [thermal, fluidic,] engineering]: https://github.com/ManimCommunity/manim/issues/3362 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.
thdc 3y ago
I use TikZJax https://tikzjax.com/ 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.
- ajkjk 3y ago
  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/ https://tikzjax-demo.glitch.me/ and it seems like it is just a couple MB. Not bad.
  - thdc 3y ago
    Yeah around 1.5mb transferred but less of an issue with caching of course. You also won't have something nice like $$ or \[ \] and will have to put the <script type="text/tikz"> \begin{tikzpicture} ... \end{tikzpicture} </script> tags directly in your markdown, if that even works.
    - ajkjk 3y ago
      Jekyll at least has an <% include %> tag that can introduce html into a markdown document, so I can probably use that. Tbd. The $$ is awkward though.
baz00 3y ago
I tried literally everything out there. TikZ is actually the least horrible as far as presentation goes. However it's hard work. I eventually settled on using Goodnotes on my iPad, drawing them by hand and just exporting the images.
WillAdams 3y ago
Does Eukleides integrate with MathJax?
franciscop 3y ago
I made https://vector-graph.com/ 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:  <vector-graph x="3" y="3" axis="false"> <polygon points="0,0;1,3;3,1" sides="a,b,c" angles="α,β,γ"></polygon> </vector-graph>  <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
- culi 3y ago
  is it based on web components?
  - franciscop 3y ago
    `<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 https://vector-graph.com/#nodejs
    - ble 3y ago
      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.js#L585 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.
closetkantian 3y ago
If I could add a pile on question, how about bar graphs and line graphs?
vitorsr 3y ago
Just plain old draw.io: https://www.drawio.com/doc/faq/math-typesetting https://www.drawio.com/doc/faq/math-typesetting
- ajkjk 3y ago
  Oh neat, I didn't realize they supported this.
kisonecat 3y ago
I wrote https://github.com/kisonecat/tikzjax https://github.com/kisonecat/tikzjax for running tikz in the browser with webassembly, but I have work to do to make it work better.
- ajkjk 3y ago
  What would you do to improve it?
phkahler 3y ago
I would like to make Solvespace better for use cases like that, but the focus really is CAD. Once we get arbitrary expression constraints you'll be able to turn on the grid and trace points to plot equations, for example.
tlarkworthy 3y ago
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#markdown_skill https://observablehq.com/@tomlarkworthy/robocoop-skills#mark... If you give me a problem I can see if it can solve it
blt 3y ago
I have tried ChatGPT for TikZ before with mixed results. It can do some very "example" cases like a complete graph. But anything more custom is tough. It starts making mistakes and seems to have trouble correcting them. Still, it might be good for a starting point to help you remember syntax and tikzlibrary usage.
quenix 3y ago
I like Mathcha for a WYSIWYG option. https://www.mathcha.io/ https://www.mathcha.io/
binarycrusader 3y ago
Not sure if it's considered "state of the art", but I've always liked markdeep: https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/ ...which supports LaTeX math via MathJax.
hoseja 3y ago
Not completely relevant but there's now https://vectorpea.com/ https://vectorpea.com/ by the creator of Photopea

ajkjk 3y ago

Lol, thanks. I'll check it out. But, is the license such that you need to give permission? I see that you have a "commercial license" but it seems like that wouldn't apply to me anyway. I don't know much about software licenses tbh so some clarification would be nice.

franciscop 3y ago
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 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/LICENSE https://github.com/franciscop/vector-graph/blob/master/LICEN...
- ajkjk 3y ago
  Hmm. That makes me less interested, really. The restrictive license doesn't affect my project but I don't want to use something I can't recommend to someone else, and I would never want to build something on that because I don't want to think about licenses at all in my life, much less deal with one that encodes someone else's ideology that I don't share. Any reason not to just make it MIT? Which is apparently what e.g. KaTeX uses.
  - franciscop 3y ago
    > Any reason not to just make it MIT? 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.
  - buzzy_hacker 3y ago
    Since you said you don’t know much about licenses, I suggest you check out https://writefreesoftware.org/learn/copyleft https://writefreesoftware.org/learn/copyleft AGPL is a copyleft license, MIT is not. There’s good reasons for a developer to prefer copyleft.
    - ajkjk 3y ago
      For whatever reason I find licensing incredibly boring. Anything I learn about it just vanishes the next day. That's basically why I'm only interested in dealing with licenses I don't have to think about.