Standard Flowchart Entities

Annotation

Preview
Usage
Definition

import { Annotation } from '@dinghy/diagrams/entitiesFlowchart'

<Annotation/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ANNOTATION } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, ANNOTATION)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.annotation_1;align=left;pointerEvents=1;',
  },
  _width: 50,
  _height: 100,
}

Annotation 2

Preview
Usage
Definition

import { Annotation2 } from '@dinghy/diagrams/entitiesFlowchart'

<Annotation2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ANNOTATION_2 } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, ANNOTATION_2)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.annotation_2;align=left;labelPosition=right;pointerEvents=1;',
  },
  _width: 50,
  _height: 100,
}

Card

Preview
Usage
Definition

import { Card } from '@dinghy/diagrams/entitiesFlowchart'

<Card/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, CARD)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=card;whiteSpace=wrap;size=20;arcSize=12;',
  },
  _width: 100,
  _height: 60,
}

Collate

Preview
Usage
Definition

import { Collate } from '@dinghy/diagrams/entitiesFlowchart'

<Collate/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COLLATE } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, COLLATE)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.flowchart.collate;',
  },
  _original_width: 100,
  _original_height: 100,

}

Data

Preview
Usage
Definition

import { Data } from '@dinghy/diagrams/entitiesFlowchart'

<Data/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATA } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, DATA)}
  />

{
  _style: {
    entity: 'shape=parallelogram;html=1;strokeWidth=2;perimeter=parallelogramPerimeter;whiteSpace=wrap;rounded=1;arcSize=12;size=0.23;',
  },
  _width: 100,
  _height: 60,
}

Database

Preview
Usage
Definition

import { Database } from '@dinghy/diagrams/entitiesFlowchart'

<Database/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATABASE } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, DATABASE)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.database;whiteSpace=wrap;',
  },
  _original_width: 60,
  _original_height: 60,

}

Decision

Preview
Usage
Definition

import { Decision } from '@dinghy/diagrams/entitiesFlowchart'

<Decision/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DECISION } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, DECISION)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;',
  },
  _original_width: 100,
  _original_height: 100,

}

Delay

Preview
Usage
Definition

import { Delay } from '@dinghy/diagrams/entitiesFlowchart'

<Delay/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DELAY } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, DELAY)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.delay;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Direct Data

Preview
Usage
Definition

import { DirectData } from '@dinghy/diagrams/entitiesFlowchart'

<DirectData/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DIRECT_DATA } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, DIRECT_DATA)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.direct_data;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Display

Preview
Usage
Definition

import { Display } from '@dinghy/diagrams/entitiesFlowchart'

<Display/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISPLAY } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, DISPLAY)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.display;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Document

Preview
Usage
Definition

import { Document } from '@dinghy/diagrams/entitiesFlowchart'

<Document/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DOCUMENT } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, DOCUMENT)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.document2;whiteSpace=wrap;size=0.25;',
  },
  _width: 100,
  _height: 60,
}

Extract or Measurement

Preview
Usage
Definition

import { ExtractOrMeasurement } from '@dinghy/diagrams/entitiesFlowchart'

<ExtractOrMeasurement/>

// or

import { extendStyle } from "@dinghy/base-components";
import { EXTRACT_OR_MEASUREMENT } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, EXTRACT_OR_MEASUREMENT)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.extract_or_measurement;whiteSpace=wrap;',
  },
  _width: 95,
  _height: 60,
}

Internal Storage

Preview
Usage
Definition

import { InternalStorage } from '@dinghy/diagrams/entitiesFlowchart'

<InternalStorage/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INTERNAL_STORAGE } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, INTERNAL_STORAGE)}
  />

{
  _style: {
    entity: 'shape=internalStorage;whiteSpace=wrap;html=1;dx=15;dy=15;rounded=1;arcSize=8;strokeWidth=2;',
  },
  _original_width: 70,
  _original_height: 70,

}

Loop Limit

Preview
Usage
Definition

import { LoopLimit } from '@dinghy/diagrams/entitiesFlowchart'

<LoopLimit/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOOP_LIMIT } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, LOOP_LIMIT)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.loop_limit;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Manual Input

Preview
Usage
Definition

import { ManualInput } from '@dinghy/diagrams/entitiesFlowchart'

<ManualInput/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MANUAL_INPUT } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, MANUAL_INPUT)}
  />

{
  _style: {
    entity: 'html=1;strokeWidth=2;shape=manualInput;whiteSpace=wrap;rounded=1;size=26;arcSize=11;',
  },
  _width: 100,
  _height: 60,
}

Manual Operation

Preview
Usage
Definition

import { ManualOperation } from '@dinghy/diagrams/entitiesFlowchart'

<ManualOperation/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MANUAL_OPERATION } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, MANUAL_OPERATION)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=trapezoid;perimeter=trapezoidPerimeter;whiteSpace=wrap;size=0.23;arcSize=10;flipV=1;labelPosition=center;align=center;',
  },
  _width: 100,
  _height: 60,
}

Merge or Storage

Preview
Usage
Definition

import { MergeOrStorage } from '@dinghy/diagrams/entitiesFlowchart'

<MergeOrStorage/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MERGE_OR_STORAGE } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, MERGE_OR_STORAGE)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.merge_or_storage;whiteSpace=wrap;',
  },
  _width: 95,
  _height: 60,
}

Multi-Document

Preview
Usage
Definition

import { MultiDocument } from '@dinghy/diagrams/entitiesFlowchart'

<MultiDocument/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MULTI_DOCUMENT } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, MULTI_DOCUMENT)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.multi-document;whiteSpace=wrap;',
  },
  _width: 88,
  _height: 60,
}

Off-Page Reference

Preview
Usage
Definition

import { OffPageReference } from '@dinghy/diagrams/entitiesFlowchart'

<OffPageReference/>

// or

import { extendStyle } from "@dinghy/base-components";
import { OFF_PAGE_REFERENCE } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, OFF_PAGE_REFERENCE)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=offPageConnector;rounded=0;size=0.5;',
  },
  _original_width: 60,
  _original_height: 60,

}

On-Page Reference

Preview
Usage
Definition

import { OnPageReference } from '@dinghy/diagrams/entitiesFlowchart'

<OnPageReference/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ON_PAGE_REFERENCE } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, ON_PAGE_REFERENCE)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.flowchart.on-page_reference;',
  },
  _original_width: 60,
  _original_height: 60,

}

Or

Preview
Usage
Definition

import { Or } from '@dinghy/diagrams/entitiesFlowchart'

<Or/>

// or

import { extendStyle } from "@dinghy/base-components";
import { OR } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, OR)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.flowchart.summing_function;',
  },
  _original_width: 70,
  _original_height: 70,

}

Parallel Mode

Preview
Usage
Definition

import { ParallelMode } from '@dinghy/diagrams/entitiesFlowchart'

<ParallelMode/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PARALLEL_MODE } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, PARALLEL_MODE)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.flowchart.parallel_mode;pointerEvents=1',
  },
  _width: 95,
  _height: 40,
}

Predefined Process

Preview
Usage
Definition

import { PredefinedProcess } from '@dinghy/diagrams/entitiesFlowchart'

<PredefinedProcess/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PREDEFINED_PROCESS } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, PREDEFINED_PROCESS)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=process;whiteSpace=wrap;rounded=1;size=0.14;arcSize=6;',
  },
  _width: 100,
  _height: 60,
}

Preparation

Preview
Usage
Definition

import { Preparation } from '@dinghy/diagrams/entitiesFlowchart'

<Preparation/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PREPARATION } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, PREPARATION)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=hexagon;perimeter=hexagonPerimeter2;arcSize=6;size=0.27;',
  },
  _width: 100,
  _height: 60,
}

Process

Preview
Usage
Definition

import { Process } from '@dinghy/diagrams/entitiesFlowchart'

<Process/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PROCESS } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, PROCESS)}
  />

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;absoluteArcSize=1;arcSize=14;strokeWidth=2;',
  },
  _original_width: 100,
  _original_height: 100,

}

Sequential Data

Preview
Usage
Definition

import { SequentialData } from '@dinghy/diagrams/entitiesFlowchart'

<SequentialData/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SEQUENTIAL_DATA } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, SEQUENTIAL_DATA)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.sequential_data;whiteSpace=wrap;',
  },
  _original_width: 100,
  _original_height: 100,

}

Sort

Preview
Usage
Definition

import { Sort } from '@dinghy/diagrams/entitiesFlowchart'

<Sort/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SORT } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, SORT)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.flowchart.sort;',
  },
  _original_width: 100,
  _original_height: 100,

}

Start

Preview
Usage
Definition

import { Start } from '@dinghy/diagrams/entitiesFlowchart'

<Start/>

// or

import { extendStyle } from "@dinghy/base-components";
import { START } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, START)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.start_1;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Start 2

Preview
Usage
Definition

import { Start2 } from '@dinghy/diagrams/entitiesFlowchart'

<Start2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { START_2 } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, START_2)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.start_2;whiteSpace=wrap;',
  },
  _original_width: 100,
  _original_height: 100,

}

Stored Data

Preview
Usage
Definition

import { StoredData } from '@dinghy/diagrams/entitiesFlowchart'

<StoredData/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STORED_DATA } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, STORED_DATA)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.stored_data;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Summing Junction

Preview
Usage
Definition

import { SummingJunction } from '@dinghy/diagrams/entitiesFlowchart'

<SummingJunction/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SUMMING_JUNCTION } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, SUMMING_JUNCTION)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.flowchart.or;',
  },
  _original_width: 70,
  _original_height: 70,

}

Tape

Preview
Usage
Definition

import { Tape } from '@dinghy/diagrams/entitiesFlowchart'

<Tape/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TAPE } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, TAPE)}
  />

{
  _style: {
    entity: 'shape=tape;whiteSpace=wrap;html=1;strokeWidth=2;size=0.19',
  },
  _width: 100,
  _height: 65,
}

Terminator

Preview
Usage
Definition

import { Terminator } from '@dinghy/diagrams/entitiesFlowchart'

<Terminator/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TERMINATOR } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, TERMINATOR)}
  />

{
  _style: {
    entity: 'strokeWidth=2;html=1;shape=mxgraph.flowchart.terminator;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Transfer

Preview
Usage
Definition

import { Transfer } from '@dinghy/diagrams/entitiesFlowchart'

<Transfer/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TRANSFER } from '@dinghy/diagrams/entitiesFlowchart'

<Shape 
  {...props}
  _style={extendStyle(props, TRANSFER)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;strokeWidth=2;shape=mxgraph.arrows2.arrow;dy=0.6;dx=40;notch=0;',
  },
  _width: 100,
  _height: 70,
}

Annotation​

Annotation 2​

Card​

Collate​

Data​

Database​

Decision​

Delay​

Direct Data​

Display​

Document​

Extract or Measurement​

Internal Storage​

Loop Limit​

Manual Input​

Manual Operation​

Merge or Storage​

Multi-Document​

Off-Page Reference​

On-Page Reference​

Or​

Parallel Mode​

Predefined Process​

Preparation​

Process​

Sequential Data​

Sort​

Start​

Start 2​

Stored Data​

Summing Junction​

Tape​

Terminator​

Transfer​

Annotation

Annotation 2

Card

Collate

Data

Database

Decision

Delay

Direct Data

Display

Document

Extract or Measurement

Internal Storage

Loop Limit

Manual Input

Manual Operation

Merge or Storage

Multi-Document

Off-Page Reference

On-Page Reference

Or

Parallel Mode

Predefined Process

Preparation

Process

Sequential Data

Sort

Start

Start 2

Stored Data

Summing Junction

Tape

Terminator

Transfer