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 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("sg1")
class O8 sg1;
O1["thing"] -- useful for subgraphs -->O8["sg1"]
O9("sg2")
class O9 sg2;
O1["thing"] -- useful for subgraphs -->O9["sg2"]
O10("sg2-5-10")
class O10 sg2-5-10;
O9["sg2"] -- custom borders -->O10["sg2-5-10"]
O11("sg2-10-2")
class O11 sg2-5-2;
O9["sg2"] -- custom borders -->O11["sg2-10-2"]
O12("idea")
class O12 idea;
O4["object"] -- linked to -->O12["idea"]
O13("idea_bn")
class O13 idea_bn;
O12["idea"] -- linked to -->O13["idea_bn"]
O14("document")
class O14 document;
O4["object"] -- linked to -->O14["document"]
O15("document_bn")
class O15 document_bn;
O14["document"] -- linked to -->O15["document_bn"]
O16("type")
class O16 type;
O4["object"] -- linked to -->O16["type"]
O17("dims")
class O17 dims;
O4["object"] -- linked to -->O17["dims"]
O18("dims_bn")
class O18 dims_bn;
O17["dims"] -- linked to -->O18["dims_bn"]
O19("place")
class O19 place;
O4["object"] -- linked to -->O19["place"]
O20("place_bn")
class O20 place_bn;
O19["place"] -- linked to -->O20["place_bn"]
O21("name")
class O21 name;
O6["actor"] -- linked to -->O21["name"]
O22("period")
class O22 period;
O2["event"] -- linked to -->O22["period"]
O23("period_bn")
class O23 period_bn;
O22["period"] -- linked to -->O23["period_bn"]
O24("url")
class O24 url;
O1["thing"] -- linked to -->O24["url"]
O25("note")
class O25 note;
O24["url"] -- linked to -->O25["note"]
O26("literal")
class O26 literal;
O24["url"] -- linked to -->O26["literal"]
O27("stuff")
class O27 UNDEFINED;
O25["note"] -- linked to -->O27["stuff"]
O28("base")
class O28 base;
O27["stuff"] -- linked to -->O28["base"]
O29("Linked Art")
class O29 crm;
O30("event2")
class O30 event2;
O29["Linked Art"] -- linked to -->O30["event2"]
O31("object2")
class O31 object2;
O29["Linked Art"] -- linked to -->O31["object2"]
O32("actor2")
class O32 actor2;
O29["Linked Art"] -- linked to -->O32["actor2"]
O33("dims2")
class O33 dims2;
O29["Linked Art"] -- linked to -->O33["dims2"]
O34("digital2")
class O34 digital2;
O29["Linked Art"] -- linked to -->O34["digital2"]
O35("type2")
class O35 type2;
O32["actor2"] -- linked to -->O35["type2"]
O36("name2")
class O36 name2;
O35["type2"] -- linked to -->O36["name2"]
O37("infoobj")
class O37 infoobj;
O33["dims2"] -- linked to -->O37["infoobj"]
O38("timespan")
class O38 timespan;
O37["infoobj"] -- linked to -->O38["timespan"]
O39("place2")
class O39 place2;
O38["timespan"] -- linked to -->O39["place2"]
O30["event2"] -- linked to -->O26["literal"]
O40("classstyle")
class O40 classstyle;
O30["event2"] -- linked to -->O40["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.