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

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

>>franci+pD
is it based on web components?

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

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

zlacker