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:

PS, I give you permission to use it in your personal website for free, alexkritchevsky.com

In case you are not aware of these awesome posts

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

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

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

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.

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

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/

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

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.

Penrose looks pretty good:

https://github.com/penrose/penrose

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

Have you tried Mermaid?

https://mermaid.js.org/

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.

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

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?