%%{init: {'flowchart': {'wrappingWidth': 600}}}%%
flowchart LR
classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
classDef thing stroke:#2C5D98,fill:#D0E5FF,color:#2C5D98,rx:5px,ry:5px;
classDef event stroke:#5C811F,fill:#5C811F,color:white,rx:5px,ry:5px;
classDef event_bn stroke:#4A6719,fill:#D0DDBB,color:#4A6719,rx:20px,ry:20px;
classDef object stroke:#2C5D98,fill:#2C5D98,color:white,rx:5px,ry:5px;
classDef object_bn stroke:#1E3F67,fill:#94abc5,color:#1E3F67,rx:20px,ry:20px;
classDef actor stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
classDef actor_bn stroke:#564F26,fill:#ffee8c,color:#564F26,rx:20px,ry:20px;
classDef missing stroke:#A32D2D,fill:#FCEBEB,color:#501313,rx:5px,ry:5px;
classDef sg1 stroke:black,fill:#fefcf4,color:black,rx:10px,ry:10px;
classDef sg2 stroke:black,fill:#fffffb,color:black,rx:10px,ry:10px;
classDef sg2-5-10 stroke:black,fill:#fffffb,color:black,rx:10px,ry:10px,stroke-dasharray:5 10;
classDef sg2-5-2 stroke:black,fill:#fffffb,color:black,rx:10px,ry:10px,stroke-dasharray:5 2;
classDef idea stroke:#1f0e9a,fill:#1f0e9a,color:white,rx:5px,ry:5px;
classDef idea_bn stroke:#1f0e9a,fill:#e7e5f6,color:#1f0e9a,rx:20px,ry:20px;
classDef document stroke:#2C5D98,fill:#33B0FF,color:2C5D98,rx:5px,ry:5px;
classDef document_bn stroke:#1E3F67,fill:#B8E3FE,color:#1E3F67,rx:20px,ry:20px;
classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px;
classDef dims stroke:#9A6D3B,fill:#9A6D3B,color:white,rx:5px,ry:5px;
classDef dims_bn stroke:#674928,fill:#d4bda4,color:#674928,rx:20px,ry:20px;;
classDef place stroke:#bd4512,fill:#bd4512,color:white,rx:5px,ry:5px;
classDef place_bn stroke:#9D390F,fill:#eecaba,color:#9D390F,rx:20px,ry:20px;
classDef name stroke:#563800,fill:#FEF3BA,color:#563800,rx:20px,ry:20px;
classDef period stroke:#6340b1,fill:#6340b1,color:white,rx:5px,ry:5px;
classDef period_bn stroke:#6340b1,fill:#dacef5,color:#6340b1,rx:20px,ry:20px;
classDef url stroke:#2C5D98,fill:white,color:#2C5D98,rx:5px,ry:5px;
classDef note stroke:#2C5D98,fill:#D8FDFF,color:#2C5D98,rx:5px,ry:5px;
classDef literal stroke:black,fill:#f0f0e0,color:black,rx:2px,ry:2px,max-width:100px;
classDef base stroke:black,fill:white,color:black,rx:5px,ry:5px;
classDef event2 stroke:blue,fill:#96e0f6,color:black,rx:20px,ry:20px;
classDef object2 stroke:black,fill:#E1BA9C,color:black,rx:20px,ry:20px;
classDef actor2 stroke:black,fill:#FFBDCA,color:black,rx:20px,ry:20px;
classDef dims2 stroke:black,fill:#c6c6c6,color:black,rx:20px,ry:20px;
classDef digital2 stroke:#999,fill:#eee,color:black,rx:5px,ry:5px;
classDef type2 stroke:red,fill:#FAB565,color:black,rx:20px,ry:20px;
classDef name2 stroke:orange,fill:#FEF3BA,color:black,rx:20px,ry:20px;
classDef infoobj stroke:#907010,fill:#fffa40,color:black,rx:20px,ry:20px;
classDef timespan stroke:blue,fill:#ddfffe,color:black,rx:20px,ry:20px;
classDef place2 stroke:#3a7a3a,fill:#aff090,color:black,rx:20px,ry:20px;
classDef classstyle stroke:black,fill:white,color:black,rx:5px,ry:5px;
O0("crm")
class O0 crm;
O1("thing")
class O1 thing;
O0["crm"] -- linked to -->O1["thing"]
O2("event")
class O2 event;
O1["thing"] -- linked to -->O2["event"]
O3("event_bn")
class O3 event_bn;
O2["event"] -- linked to -->O3["event_bn"]
O4("object")
class O4 object;
O1["thing"] -- linked to -->O4["object"]
O5("object_bn")
class O5 object_bn;
O4["object"] -- linked to -->O5["object_bn"]
O6("actor")
class O6 actor;
O1["thing"] -- linked to -->O6["actor"]
O7("actor_bn")
class O7 actor_bn;
O6["actor"] -- linked to -->O7["actor_bn"]
O8("missing")
class O8 missing;
O1["thing"] -- linked to -->O8["missing"]
O9("sg1")
class O9 sg1;
O1["thing"] -- useful for subgraphs -->O9["sg1"]
O10("sg2")
class O10 sg2;
O1["thing"] -- useful for subgraphs -->O10["sg2"]
O11("sg2-5-10")
class O11 sg2-5-10;
O10["sg2"] -- custom borders -->O11["sg2-5-10"]
O12("sg2-10-2")
class O12 sg2-5-2;
O10["sg2"] -- custom borders -->O12["sg2-10-2"]
O13("idea")
class O13 idea;
O4["object"] -- linked to -->O13["idea"]
O14("idea_bn")
class O14 idea_bn;
O13["idea"] -- linked to -->O14["idea_bn"]
O15("document")
class O15 document;
O4["object"] -- linked to -->O15["document"]
O16("document_bn")
class O16 document_bn;
O15["document"] -- linked to -->O16["document_bn"]
O17("type")
class O17 type;
O4["object"] -- linked to -->O17["type"]
O18("dims")
class O18 dims;
O4["object"] -- linked to -->O18["dims"]
O19("dims_bn")
class O19 dims_bn;
O18["dims"] -- linked to -->O19["dims_bn"]
O20("place")
class O20 place;
O4["object"] -- linked to -->O20["place"]
O21("place_bn")
class O21 place_bn;
O20["place"] -- linked to -->O21["place_bn"]
O22("name")
class O22 name;
O6["actor"] -- linked to -->O22["name"]
O23("period")
class O23 period;
O2["event"] -- linked to -->O23["period"]
O24("period_bn")
class O24 period_bn;
O23["period"] -- linked to -->O24["period_bn"]
O25("url")
class O25 url;
O1["thing"] -- linked to -->O25["url"]
O26("note")
class O26 note;
O25["url"] -- linked to -->O26["note"]
O27("literal")
class O27 literal;
O25["url"] -- linked to -->O27["literal"]
O28("stuff")
class O28 UNDEFINED;
O26["note"] -- linked to -->O28["stuff"]
O29("base")
class O29 base;
O28["stuff"] -- linked to -->O29["base"]
O30("Linked Art")
class O30 crm;
O31("event2")
class O31 event2;
O30["Linked Art"] -- linked to -->O31["event2"]
O32("object2")
class O32 object2;
O30["Linked Art"] -- linked to -->O32["object2"]
O33("actor2")
class O33 actor2;
O30["Linked Art"] -- linked to -->O33["actor2"]
O34("dims2")
class O34 dims2;
O30["Linked Art"] -- linked to -->O34["dims2"]
O35("digital2")
class O35 digital2;
O30["Linked Art"] -- linked to -->O35["digital2"]
O36("type2")
class O36 type2;
O33["actor2"] -- linked to -->O36["type2"]
O37("name2")
class O37 name2;
O36["type2"] -- linked to -->O37["name2"]
O38("infoobj")
class O38 infoobj;
O34["dims2"] -- linked to -->O38["infoobj"]
O39("timespan")
class O39 timespan;
O38["infoobj"] -- linked to -->O39["timespan"]
O40("place2")
class O40 place2;
O39["timespan"] -- linked to -->O40["place2"]
O31["event2"] -- linked to -->O27["literal"]
O41("classstyle")
class O41 classstyle;
O31["event2"] -- linked to -->O41["classstyle"]
;
Information
This is an interactive live modelling system which can automatically convert simple tab separated triples or JSON-LD (experimental) into graphical models and flow diagrams using the Mermaid Javascript library. It has been designed to be very simple to use. The tab separated triples can be typed directly into the web-page, but users can also work and prepare data in three (or four columns if applying formatting) of a online spreadsheet and then just copy the relevant columns and paste them directly into the data entry text box.
In general the tool makes use of a simple set of predefined formats for the flow diagrams, taken from the Mermaid library, but a series of additional predefined formats have also be provided and can be defined as a fourth "triple".
The default landing page presents an example set or data, and the generated model demonstrates the functionality provided. As a new user it is recommended that you try editing this data to see how the diagrams are built. Additional examples are also available via the Examples menu option in the upper right.
The system has also be defined to allow models to be shared via automatically generate, and often quite long, URLs. This can be accessed via the Links menu option, as the Bookmark Link. A static image version of any given model can be saved by following the Download Image option and using the tools provide by the Mermaid Ink system. It is also possible to further edit a model using the full options of the Mermaid library using the Mermaid Live Editor, via the Mermaid Editor link.
In general the tool makes use of a simple set of predefined formats for the flow diagrams, taken from the Mermaid library, but a series of additional predefined formats have also be provided and can be defined as a fourth "triple".
The default landing page presents an example set or data, and the generated model demonstrates the functionality provided. As a new user it is recommended that you try editing this data to see how the diagrams are built. Additional examples are also available via the Examples menu option in the upper right.
The system has also be defined to allow models to be shared via automatically generate, and often quite long, URLs. This can be accessed via the Links menu option, as the Bookmark Link. A static image version of any given model can be saved by following the Download Image option and using the tools provide by the Mermaid Ink system. It is also possible to further edit a model using the full options of the Mermaid library using the Mermaid Live Editor, via the Mermaid Editor link.
Acknowledgements:
This tool was originally developed within the National Gallery, but its continue development and public presentation has also been supported by:The H2020 IPERION-HS project
The H2020 SSHOC project
The AHRC Funded Linked.Art project
More questions or issues? - Try Github.