Mockup Markup Entities
Horizontal Curly Brace
- Preview
- Usage
- Definition
import { HorizontalCurlyBrace } from '@dinghy/diagrams/entitiesMockupMarkup'
<HorizontalCurlyBrace/>
// or
import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_CURLY_BRACE } from '@dinghy/diagrams/entitiesMockupMarkup'
<Shape
{...props}
_style={extendStyle(props, HORIZONTAL_CURLY_BRACE)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.markup.curlyBrace;whiteSpace=wrap;strokeColor=#999999;',
},
_width: 100,
_height: 20,
}
Horizontal Line
- Preview
- Usage
- Definition
import { HorizontalLine } from '@dinghy/diagrams/entitiesMockupMarkup'
<HorizontalLine/>
// or
import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_LINE } from '@dinghy/diagrams/entitiesMockupMarkup'
<Shape
{...props}
_style={extendStyle(props, HORIZONTAL_LINE)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.markup.line;strokeColor=#999999;',
},
_width: 100,
_height: 20,
}
Red X
- Preview
- Usage
- Definition
import { RedX } from '@dinghy/diagrams/entitiesMockupMarkup'
<RedX/>
// or
import { extendStyle } from "@dinghy/base-components";
import { RED_X } from '@dinghy/diagrams/entitiesMockupMarkup'
<Shape
{...props}
_style={extendStyle(props, RED_X)}
/>
{
_style: {
entity: 'shape=mxgraph.mockup.markup.redX;fillColor=#ff0000;html=1;shadow=0;whiteSpace=wrap;strokeColor=none;',
},
_width: 200,
_height: 100,
}
Scratch Out
- Preview
- Usage
- Definition

import { ScratchOut } from '@dinghy/diagrams/entitiesMockupMarkup'
<ScratchOut/>
// or
import { extendStyle } from "@dinghy/base-components";
import { SCRATCH_OUT } from '@dinghy/diagrams/entitiesMockupMarkup'
<Shape
{...props}
_style={extendStyle(props, SCRATCH_OUT)}
/>
{
_style: {
entity: 'shape=mxgraph.mockup.markup.scratchOut;shadow=0;dashed=0;html=1;whiteSpace=wrap;strokeColor=#999999;strokeWidth=4;',
},
_width: 200,
_height: 100,
}
Vertical Curly Brace
- Preview
- Usage
- Definition
import { VerticalCurlyBrace } from '@dinghy/diagrams/entitiesMockupMarkup'
<VerticalCurlyBrace/>
// or
import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_CURLY_BRACE } from '@dinghy/diagrams/entitiesMockupMarkup'
<Shape
{...props}
_style={extendStyle(props, VERTICAL_CURLY_BRACE)}
/>
{
_style: {
entity: 'labelPosition=right;align=left;strokeWidth=1;shape=mxgraph.mockup.markup.curlyBrace;html=1;shadow=0;dashed=0;strokeColor=#999999;direction=north;',
},
_width: 20,
_height: 100,
}
Vertical Line
- Preview
- Usage
- Definition
import { VerticalLine } from '@dinghy/diagrams/entitiesMockupMarkup'
<VerticalLine/>
// or
import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_LINE } from '@dinghy/diagrams/entitiesMockupMarkup'
<Shape
{...props}
_style={extendStyle(props, VERTICAL_LINE)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.markup.line;strokeColor=#999999;direction=north;',
},
_width: 20,
_height: 100,
}