|
|
To make use of the Mermaid diagram generator defined in `mermaid.py`, you must follow the naming scheme defined below for the `id` field of the various components used in [callback functions](callbacks):
|
|
|
|
|
|
`<panel>-<component_name>-<component_type>`
|
|
|
|
|
|
* `panel` is the name of the panel to which the component belongs, e.g. sequence, structure, compound, phylogeny. This cannot contain '-'s
|
|
|
* `component_name` is a descriptive name for the component, e.g `alignment`, `single-download`, `color-scheme-select` etc. This can have any number of `-`s
|
|
|
* `component_type` is the type of component used, e.g. `button`, `dropdown`, `viewer` etc. This cannot contain '-'s.
|
|
|
|
|
|
To generate the callback diagram, run:
|
|
|
|
|
|
```sh
|
|
|
python mermaid.py path/to/app_callbacks.py mermaid.md
|
|
|
```
|
|
|
where `mermaid.md` defines the name of the output diagram file.
|
|
|
|
|
|
This will parse all the panels and components defined and present you with dropdowns to assign a [shape](https://mermaid-js.github.io/mermaid/#/flowchart?id=node-shapes) to each component type, and choose an [arrow type](https://mermaid-js.github.io/mermaid/#/flowchart?id=links-between-nodes). Use TAB to access dropdown options. It will also ask whether you want to save these choices, after which you can load them automatically on the next diagram generation by using `python mermaid.py path/to/app_callbacks.py mermaid.md node_shapes.json`.
|
|
|
|
|
|
Paste the generated Mermaid markdown (in between the two sets of triple backticks) into the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) to see your diagram. This can help you keep track of which components link to each other and which functions need to be modified when adding a new component or panel. |
|
|
\ No newline at end of file |