A small webpage for making GIFs of mermaid graphs
Made with:
- monaco-editor and monaco-mermaid for the text editor
- Mermaid for graph rendering
- html2canvas and gif.js for creating the GIF
- simple.css for the styling
Uses a simple templating style to generate several similar frames from the same base text
- Tempates start with
{[and end with]}, to not conflict with Mermaid constructs. - Each part consists of the frame number, from which point on this applies
- So for example,
{[0 ~~~ |2 -.-> |3 --> ]}means "from frame 0, be~~~; from frame 2, be-.->; from frame 3, be-->"
Database migration
graph TD
Source {[0 --> |4 ~~~ ]} OldDB
Source {[0 ~~~ |1 --> ]} NewDB{[0 :::invisible |1 ]}
OldDB{[0 |4 :::invisible ]} {[0 --> |3 -.-> |4 ~~~ ]} Destination
NewDB {[0 ~~~ |2 -.-> |3 --> ]} Destination
classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000;
Binary tree rotation