https://github.com/3moly/compose-data-viz
Ready-to-use Canvas and Graph visualization components similar to Miro-style canvas or Obsidian’s graph.
https://github.com/3moly/compose-data-viz
compose-multiplatform compose-ui force graphs ui
Last synced: 5 months ago
JSON representation
Ready-to-use Canvas and Graph visualization components similar to Miro-style canvas or Obsidian’s graph.
- Host: GitHub
- URL: https://github.com/3moly/compose-data-viz
- Owner: 3moly
- License: apache-2.0
- Created: 2025-11-08T05:19:02.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-12-06T00:35:17.000Z (7 months ago)
- Last Synced: 2025-12-08T20:55:14.266Z (6 months ago)
- Topics: compose-multiplatform, compose-ui, force, graphs, ui
- Language: Kotlin
- Homepage: https://composedataviz.3moly.com/
- Size: 952 KB
- Stars: 7
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE.txt
Awesome Lists containing this project
README
[android, wasm, js, ios, jvm, macos]
# compose-data-vizualization
You need Miro whiteboard or Graph nodes like in Obsidian App in Compose multiplatform?
This library can help you. Most prepared motions and actions with Whiteboard and Graph are given.
Open demo site in wasm (mobile friendly):
https://composedataviz.3moly.com/
```gradle
implementation("io.github.3moly:compose-data-viz:0.1.0")
// The core module is needed only if you split models of this library from ui.
// (Be aware that it includes compose.foundation for Offset and Color classes)
implementation("io.github.3moly:compose-data-viz-core:0.1.0")
```
### Sample code
In sample module there is WhiteboardSample and GraphSample functions.
With them you can understand faster how to deal with the library.
### Whiteboard
The key part is a shape. For library it's important to know about 3 fields.
```kotlin
interface Shape {
val id: Long
val position: Offset
val size: Offset
}
```
And you can inherit above interface for more fields you wish to use in a Drawing process.
```kotlin
data class CustomShape(
override val id: Long,
override val position: Offset,
override val size: Offset,
val backgroundColor: Color?,
val data: ShapeData
) : Shape
```
So then every shape of your CustomShape will show through method in under code.
And Modifier with calculated size and location will show in DrawShapeState.
So you can use this Modifier for drawing Shape, you can draw any shape you want.
```kotlin
onDrawBlock: @Composable (DrawShapeState) -> Unit
```
```kotlin
@Composable
fun , Id> Whiteboard(
consume: Boolean,
modifier: Modifier,
action: Action?,
backgroundModifier: Modifier,
connectionsModifier: Modifier,
settings: CanvasSettings,
zoom: Float,
roundToNearest: Int?,
connectionDragBlankId: Id,
userCoordinate: Offset,
isDrawing: Boolean,
shapes: List,
connections: List>,
drawingPaths: List,
onActionSet: (Action?) -> Unit,
onAddPath: (StylusPath) -> Unit,
onMoveShape: (Int, Offset) -> Unit,
onResizeShape: (Int, Offset, Offset) -> Unit,
onAddConnection: (AddShapeConnection) -> Unit,
onZoomChange: (Float) -> Unit,
onUserCoordinateChange: (Offset) -> Unit,
settingsPanel: @Composable (position: Offset, action: Action, onDoneAction: () -> Unit) -> Unit,
onDrawBlock: @Composable (DrawShapeState) -> Unit,
) {
//...
}
```
### Graph
```kotlin
@Composable
fun Graph(
modifier: Modifier = Modifier,
userPosition: Offset,
zoom: Float,
stateNodes: List>,
coordinates: Map,
velocities: Map,
connections: Map>,
viewSettings: GraphViewSettings,
onCentralGlobalPosition: (Offset) -> Unit,
onZoomChange: (Float) -> Unit,
watchNodeId: Id? = null,
io: CoroutineContext,
onNodeClick: (GraphNode) -> Unit,
onCoordinatesUpdate: (Map) -> Unit = {},
onVelocitiesUpdate: (Map) -> Unit = {},
primaryColor: Color,
fontColor: Color,
circleColor: Color,
circleLineColor: Color
) {
//...
}
```
## Used in
- [CedarJam](https://github.com/3moly/CedarJam)