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

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

is it based on web components?

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

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.

Thanks! That was my goal! I didn't release it officially because I also wanted to add hooks/extensibility, and that was a lot trickier than I expected. I cannot expect everyone to only use the provided tools, and extensibility was a bit tricky (there's a lot of low-level math operations going on).

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.

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.

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

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.

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

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.

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.

This is freaking awesome! I imagine this would’ve been a fun project to work on. Do you have a blog or a write up on how you did this?

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

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

Does it work for 3D? If you want vectors in 3D space for example?

Unfortunately not, this is only for 2D

In case you are not aware of these awesome posts

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

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

Wow. I wish I had known about this ...

Unfortunately, he passed away in 2022. I loved his blog posts.

Wow, sorry to hear that. Came across his blog in 2021 and was instantly hooked. RIP

Do you know why he died? He must have been young.

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

Probably suicide. This is very unfortunate.

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

100% this.

I learned about this from the first linked post, immediately tried it and never looked back.

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/ )

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

It actually looks like pygame-web (pygbag) supports panda3d and harfang in WASM, too; so manim with pygame for the web.

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.

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

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 :)

And Quiver itself exports to LaTeX that uses the `tikz-cd` package ("cd" for "commutative diagrams"), if you'd like to use that directly.

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.

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/

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

https://katex.org/ may work?

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

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.

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.

god that sounds so nice. lol. I've been tortured by Tikz and that just sounds like... peace.

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.

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.

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.

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.

Penrose looks pretty good:

https://github.com/penrose/penrose

https://news.ycombinator.com/item?id=23430282

Have you tried Mermaid?

https://mermaid.js.org/

Mermaid is unable to typeset math.

yep https://github.com/mermaid-js/mermaid/issues/2776

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.

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.

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.

What would you do to improve it?

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

Not completely relevant but there's now https://vectorpea.com/ by the creator of Photopea

Just plain old draw.io:

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

Oh neat, I didn't realize they supported this.

I like Mathcha for a WYSIWYG option.

https://www.mathcha.io/

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.

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.

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.

Does Eukleides integrate with MathJax?

If I could add a pile on question, how about bar graphs and line graphs?