# @grafloria/element

Web component, dashboard kit and UML/ERD kits for Grafloria — diagrams and dashboards in any framework or none. Grafloria is an MIT diagram and dashboard engine for JavaScript.

## Install

```bash
npm install @grafloria/element @grafloria/engine @grafloria/renderer
```

It expects these alongside it:

- `@grafloria/engine` ^0.3.16
- `@grafloria/renderer` ^0.4.15

## What it exports

- [Core](https://atloria.dev/p/grafloria-h7YM7amryF/developer/grafloria-element-core): 20 exports, including `defineGrafloriaFlow`, `DiagramSpec`, `fromDocument`, `FromDocumentOptions`
- [Dashboard Kit](https://atloria.dev/p/grafloria-h7YM7amryF/developer/grafloria-element-dashboard-kit): 65 exports, including `BarWidgetData`, `bindDashboardGrid`, `boardHeightFor`, `buildCommitCommands`
- [Diagram Kit](https://atloria.dev/p/grafloria-h7YM7amryF/developer/grafloria-element-diagram-kit): 53 exports, including `addColumnAt`, `assignTiers`, `bindCardEditing`, `bindJoinGuidance`
- [Stencil Kit](https://atloria.dev/p/grafloria-h7YM7amryF/developer/grafloria-element-stencil-kit): 9 exports, including `bindShapeDataPanel`, `bindStencilPalette`, `ensureStencilKitStyles`, `ShapeDataPanelApi`

## Also exported from here

These names are documented with the package that defines them, and can be imported from this one too.

- From [@grafloria/renderer](https://atloria.dev/p/grafloria-h7YM7amryF/developer/grafloria-renderer-overview): `activeRegistryScope`, `actorColor`, `actorInitials`, `AddWaypointResult`, `Adjacency`, `AlignmentGuide`, `ALWAYS_SAFE_MODE`, `analyseTopology`, `AnchorContext`, `AnchorFn`, `AnchorResult`, `ANCHORS` and 967 more
- From [@grafloria/engine](https://atloria.dev/p/grafloria-h7YM7amryF/developer/grafloria-engine-overview): `Activity`, `ActorFrontier`, `ActorId`, `AddGroupCommand`, `AddLinkCommand`, `AddNodeCommand`, `AddOp`, `AddPortCommand`, `AddStrokeCommand`, `AddToGroupCommand`, `affectedRegion`, `AlignCommand` and 914 more