grommet
Version:
focus on the essential experience
110 lines (89 loc) • 2.02 kB
Markdown
## Diagram
Graphical connection lines. Diagram is meant to be used with Stack.
Boxes can be used in the `guidingChild` layer of Stack and then
Diagram can be used to draw lines connecting the Boxes.
[](https://storybook.grommet.io/?selectedKind=Diagram&full=0&addons=0&stories=1&panelRight=0) [](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=diagram&module=%2Fsrc%2FDiagram.js)
## Usage
```javascript
import { Diagram } from 'grommet';
<Diagram />
```
## Properties
**connections**
Required. Array of objects describing the connections.
The 'fromTarget' and 'toTarget' may be either DOM element ids or
React references.
'offset' can be used to shift a bit to reduce the amount of overlap
with other connection lines to make the lines easier to distinguish.
```
[{
anchor:
center
vertical
horizontal,
color:
string
{
dark: string,
light: string
},
fromTarget:
string
object,
label: string,
offset:
xsmall
small
medium
large
string,
thickness:
hair
xxsmall
xsmall
small
medium
large
string,
toTarget:
string
object,
type:
direct
curved
rectilinear
}]
```
## Intrinsic element
```
svg
```
## Theme
**global.edgeSize**
The possible sizes for the connections thickness and offset. Expects `object`.
Defaults to
```
{
none: '0px',
hair: '1px',
xxsmall: '3px',
xsmall: '6px',
small: '12px',
medium: '24px',
large: '48px',
xlarge: '96px',
responsiveBreakpoint: 'small',
}
```
**diagram.extend**
Any additional style for Diagram. Expects `string | (props) => {}`.
Defaults to
```
undefined
```
**diagram.line.color**
The color of the connection line. Expects `string`.
Defaults to
```
accent-1
```