[HN Gopher] Ask HN: What's the state of the art for drawing math...
___________________________________________________________________
Ask HN: What's the state of the art for drawing math diagrams
online?
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!
Author : ajkjk
Score : 65 points
Date : 2023-11-20 17:44 UTC (5 hours ago)
| k310 wrote:
| 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.
| mike986 wrote:
| In case you are not aware of these awesome posts
|
| https://castel.dev/post/lecture-notes-2/
|
| https://castel.dev/post/lecture-notes-1/
| PartiallyTyped wrote:
| Wow. I wish I had known about this ...
| s1291 wrote:
| Unfortunately, he passed away in 2022. I loved his blog posts.
| sidnb13 wrote:
| Wow, sorry to hear that. Came across his blog in 2021 and was
| instantly hooked. RIP
| Beijinger wrote:
| Do you know why he died? He must have been young.
| __rito__ wrote:
| 100% this.
|
| I learned about this from the first linked post, immediately
| tried it and never looked back.
| darknavi wrote:
| Have you tried Mermaid?
|
| https://mermaid.js.org/
| vitorsr wrote:
| Mermaid is unable to typeset math.
| montalbano wrote:
| Penrose looks pretty good:
|
| https://github.com/penrose/penrose
|
| https://news.ycombinator.com/item?id=23430282
| abdullahkhalids wrote:
| 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...
| foxmoder wrote:
| 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 :)
| Twisol wrote:
| 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 wrote:
| 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/
| westurner wrote:
| 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
| eyegor wrote:
| https://katex.org/ may work?
| mapierce2 wrote:
| 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 wrote:
| 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.
| ajkjk wrote:
| > 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 wrote:
| 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/ )
| westurner wrote:
| 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/ManimCommun
| ity/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 wrote:
| 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.
| ajkjk wrote:
| 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.
| thdc wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Does Eukleides integrate with MathJax?
| franciscop wrote:
| 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="a,b,g"></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
| culi wrote:
| is it based on web components?
| franciscop wrote:
| `<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
| ble wrote:
| 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.
| ajkjk wrote:
| 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 wrote:
| 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...
| closetkantian wrote:
| If I could add a pile on question, how about bar graphs and line
| graphs?
| vitorsr wrote:
| Just plain old draw.io:
|
| https://www.drawio.com/doc/faq/math-typesetting
| ajkjk wrote:
| Oh neat, I didn't realize they supported this.
| kisonecat wrote:
| 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.
___________________________________________________________________
(page generated 2023-11-20 23:01 UTC)