If it's not immediately apparent, Pikchr is by SQLite creator D. Richard Hipp, and is how SQLite's syntax diagrams are generated on its website.<p>It's a great little diagram language that's quite capable, and I think of it like a modern web upgrade to Brian Kernighan's PIC.
Pikchr is awesome! I'll just mention that the Markdown-based note-taking app I'm working on as far as I know is the only app on the planet that can syntax-highlight Pikchr code: <a href="https://github.com/notable/notable-insiders/releases/tag/v1.9.0-beta.4" rel="nofollow">https://github.com/notable/notable-insiders/releases/tag/v1....</a>
Pikchr is really great. The syntax looks strange at first, but the learning curve is actually low. Within 5 minutes of looking at the pikchr source of some SQLite diagrams, you'll get it. I use it to produce railroad syntax diagrams in the same style as the ones in the SQLite docs. I don't use the Markdown integration; I just generate SVGs using PikchrShow[0] and treat them as images in my HTML-based docs.<p>[0] <a href="https://pikchr.org/home/pikchrshow" rel="nofollow">https://pikchr.org/home/pikchrshow</a>
I have used both Pikchr and several of the Mediawiki extensions for diagrams (the most recently-maintained of which is <a href="https://www.mediawiki.org/wiki/Extension:Flex_Diagrams" rel="nofollow">https://www.mediawiki.org/wiki/Extension:Flex_Diagrams</a> )<p>Here is my earliest Pikchr effort: <a href="https://lumosql.org/src/not-forking" rel="nofollow">https://lumosql.org/src/not-forking</a> (click to see source.)<p>Pikchr diagrams are crisp and precise with zero configuration. Mermaid diagrams are difficult to make render as nicely as the screenshots show (<a href="https://mermaid-js.github.io" rel="nofollow">https://mermaid-js.github.io</a> ) and easier to confuse with ambiguous syntax.<p>With the addition of 5 lines Lua, Pandoc now handles Pikchr in Markdown documents: <a href="https://groups.google.com/g/pandoc-discuss/c/zZSspnHHsg0/m/mxgoOHm0AQAJ" rel="nofollow">https://groups.google.com/g/pandoc-discuss/c/zZSspnHHsg0/m/m...</a>
> Pikchr is designed to be embedded in fenced code blocks of Markdown<p>Odd choice, usually that's how you'd show the (possibly syntax-highlighted) code as-is, not execute/render it in situ.<p>E.g. what if I want a document that says 'this pikchr code generates this'? I'd expect to write something like:<p><pre><code> ```pikchr
arrow 200% "whatever"
```
renders:
$pikchr
arrow 200% "whatever"
$
</code></pre>
(Or some other syntax) not the code block twice, once with some kind of escaping.
I wasn't aware of this & looks like worth learning. I was looking ahead to learn Penrose (<a href="https://penrose.ink/" rel="nofollow">https://penrose.ink/</a>) for making diagrams in my notes.