-
Notifications
You must be signed in to change notification settings - Fork 4
Rendering diagrams with Quarto
Dayne made a timeline of report releases using Excalidraw. He posted the figure and the Excalidraw JSON in Discord. These were copied into the report, but we thought it would be cool if Quarto could render the diagram itself.
Quarto doesn't do Excalidraw. Quarto will render Mermaid and Graphviz.
mermaid is a "JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically." It can do timelines and lots of other things like Gantt charts and pie charts. The instructions are in Markdown (Excalidraw uses JSON). There is an online tool to build the instructions, but it is really coarse compared to Excalidraw
Graphviz is for graphing networks and relationships. It has its own DOT Language - a grammar for defining Graphviz nodes, edges, graphs, subgraphs, and clusters. This is a totally different type of thing than our timeline.
Since Excalidraw doesn't support server side rendering, it should be rendered only on client. The way to achieve this in next.js is using next.js dynamic import.
next.js does "React-based web applications with server-side rendering." It is possible to include something like this in Quarto. For instance, there is a process to embed an Excalidraw window in a Quarto webpage. That project is also posted in quarto-dev. But that isn't exactly what we wanted.
None of this seems right. So we render the timeline on https://excalidraw.com and export a PNG and copy it into place.