Div Diag
Attempt at using dot_ix
to generate a diagram using the same InfoGraph
input model.
Desireables
- Consistent layout.
- Rendering arrows between nodes.
- Styling nodes.
- Styling arrows.
- Consistent styling input with the
DotSvg
component. - Rendered SVG so that it can be uploaded as attachments and rendered inline, e.g. GitHub comments, mdbook.
Solutioning
Options
- A: Layout.
- B: Arrows.
- C: Styling.
🟢 A1: Flexbox + HTML to SVG Translation
- HTML elements with Flexbox, easy to integrate rendered Markdown
- Translate HTML to SVG.
🔴 A2: Render SVG directly
-
Need to implement layout algorithm that a browser already does.
e.g. Flexbox, or somehow computer width/height with font metrics, unicode widths, potentially images.
🟡 B1: Arrow Overlay
- Separately draw arrows as SVG over the laid out diagram as an overlay layer.
- Redraw arrows when layout changes.
🟢 B2: Draw Arrows Inline
- Layout diagram.
- Convert to SVG.
- Draw arrows within the SVG.
🟡 C1: CSS Utility Classes, e.g. TailwindCSS
- Take class names directly from consumer / user.
- Apply those to the HTML / SVG elements.
Requires element structure to be stable, and consumers to know the structure.
🟢 C2: CSS Utility Classes Keyed
- Take in colours and border styles etc.
- Prefix these with the appropriate structure, e.g.
[>path]:
,hover:
, etc. - Apply these to the HTML / SVG elements.
Provides a stabler interface for users, and less knowledge of internals needed. Also a bit more freedom for maintainers.
Existing Tech
HTML to SVG
- ⚪
dom-to-svg
: Typescript. Still need to try this. - ⚪
vertopal
: Python. Still need to try this. - ⚪ Build one, with a cut down version of the diagram.
Online tools have not been able to produce an accurate SVG rendering.
Drawing Arrows
- 🟡
leader-line
: Generates SVG arrows, with good configuration options. Out of the box, the SVG structure is not suitable for TailwindCSS classes. - 🟡 Modify
leader-line
: Restructure the elements in the SVG, and add classes. - ⚪ Build one, so that the elements are structured to match graphviz, and have classes added.
Styling
- 🟡 TailwindCSS: Versatile CSS library. See utility-first rationale.
- 🟢
encre-css
: This is a TailwindCSS compatible Rust library.