https://github.com/web-padawan/components-flowchart
Visualise hierarchical relationships within Vaadin components.
https://github.com/web-padawan/components-flowchart
Last synced: 4 months ago
JSON representation
Visualise hierarchical relationships within Vaadin components.
- Host: GitHub
- URL: https://github.com/web-padawan/components-flowchart
- Owner: web-padawan
- Created: 2019-10-02T06:41:34.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-04T07:20:45.000Z (over 6 years ago)
- Last Synced: 2025-10-28T04:57:41.308Z (8 months ago)
- Size: 9.77 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Components flowchart
This is a flowchart created using [mermaid](https://github.com/knsv/mermaid).
## Setup
1. Install [Mermaid Preview](https://github.com/vstirbu/vscode-mermaid-preview) VSCode extension
2. Open `COMPONENTS.md`
3. Go to Command Palette: Cmd + Shift + P
4. Choose "Preview Mermaid"
5. Focus editor tab with chart
## Syntax
- Use `[square]` for "leaf" components (with no dependents).
- Use `((circle))` for components with no dependencies / dependents.
- Use `(rounded square)` for all the other components.
## Tips
- Play with lines order. Sometimes reordering makes chart to be re-positioned.
- Use "Move Line Down" / "Move Live Up": Option + ↓ / Option + ↑
- General rule: top-down in the code = top-down / left-right in the chart
- Group root components at the top, and leaf components at the bottom.
## Links
- [mermaid flowchart syntax](https://mermaidjs.github.io/#/flowchart)
- [mermaid live editor](https://mermaidjs.github.io/mermaid-live-editor/)
- [mermaid configuration](https://mermaidjs.github.io/#/mermaidAPI?id=configuration)