OrgScribe

OrgScribe is like Markdown for org charts.
You can create your org chart by writing node data in a list.

We add each node on a new line, and to show hierarchy, we use indentation or another symbol as an offset.

OrgScribe

The node name data becomes the value of the name field.

Adding OrgScribe

To open OrgScribe UI:

const chartref = React.useRef<OrgChartJS>(null);
...
<button onClick={() => chartref.current?.orgScribeUI.show()}>Open OrgScribe</button>

Open OrgScribe

Node data

To add node data, write the field name in square brackets under the node name:

Denny Curtis
[title] CEO
 Ashley Barnett
 [title] Sales Manager
 Caden Ellison
 [title] Dev Manager

Editing

Editing the data in the Edit Form updates the OrgScribe data:

OrgScribe Editing

Node tags

You can add tags in parentheses next to the node name.

Here is how we add a tags to change the color of a node

Example CSS:

.node.yellow rect {
    fill: #FFCA28;
}

OrgScribe example:

Denny Curtis
 Ashley Barnett (yellow)

OrgScribe Tags

Offset symbol

Use the ORGSCRIBE_OFFSET constant to change the offset symbol:

OrgChartJS.ORGSCRIBE_OFFSET = "#";

Offset Symbol