Velo 🚵‍♀️🚵

Demo

This app is primarily designed for native desktop platforms, and its WebAssembly (wasm) target has a limited feature set. wasm target is best suited for quick document sharing and editing, currently only landscape mode is supported (tested on Chrome):

https://staffengineer.github.io/velo?document=https://gist.githubusercontent.com/StaffEngineer/3e95a2276790cf84b388734c921e46f4/raw/ac3d56c3e02919b5f5a3b598423ee9bbf40ad553/velo.json

Inspiration

At work, I frequently rely on lucid.app to brainstorm ideas with my colleagues or by myself. Typically, I share my ideas by sending either the diagrams themselves or screenshots of them. While I tend to stick with simple features like rectangles and arrows, I've been contemplating the idea of creating a similar tool in Rust. Not only would it allow me to learn the language, but it would also be an enjoyable project to work on.

What's implemented:

• support rectangle/circle nodes (circle was temporarily removed, will be added back soon with proper border)
• add/remove node
• node resizing
• node repositioning
• wrapped text inside nodes
• paste screenshot from clipboard [native target only 🖥️]
• connect nodes with arrows
• make app snapshot in memory and load from it (MacOs: Command + s[l])
• save app state to db and load from it
• change background color of nodes
• move node to front/back
• positioning text inside node
• multiple documents/tabs support
• load app state from url
• ability to create sharable url of the document using "Share Document" button (.velo.toml should be created in user home directory containing GitHub access token with "gist" scope) [native target only 🖥️]:

github_access_token = "<github_access_token>"

• initial markdown support
  • italic/bold text style
  • links
  • syntax highlighting
  • headings (proper headings support was temporarily removed)
  • inline code
  • ordered/unordered lists
• particles effect [native target only 🖥️]
• filter documents by text in nodes (fuzzy search) [native target only 🖥️]
• highlight nodes containing searched text [native target only 🖥️]
• ligature/emoji rendering support [emoji native target only 🖥️]

Run

Native:

cargo r 

Wasm:

cargo r --target wasm32-unknown-unknown

To create app bundle with icon (tested only on MacOS):

cargo install cargo-bundle
cargo bundle

Pre-commit actions

cargo fmt
cargo clippy -- -A clippy::type_complexity -A clippy::too_many_arguments

Basic usage

• click on rectangle icon to create rectangle node
• double-click to select node
• start typing to add text to selected node
• resize node by dragging its corners
• click on canvas to deselect node
• move node by dragging it (only unselected node can be dragged to allow mouse text selection for selected nodes)
• click on little arrow connector icon to connect nodes, arrow connector icons are placed on each side of node
• for native target there is search box that allows to filter documents by text in nodes (fuzzy search)
• for wasm target you can use url query parameter ?document=<url> to load document from url
• click save icon to save document to database on native platform or to localhost on wasm target

License

All code in this repository dual-licensed under either:

MIT License or http://opensource.org/licenses/MIT Apache License, Version 2.0 or http://www.apache.org/licenses/LICENSE-2.0 Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.

Contributing

Contributions are always welcome! Please adhere to this project's code of conduct. If you have questions or suggestions feel free to share on velo discord server.

❤️