flowchart LR classDef object stroke:#2C5D98,fill:#2C5D98,color:white,rx:5px,ry:5px; classDef actor stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px; classDef url stroke:#2C5D98,fill:white,color:#2C5D98,rx:5px,ry:5px; classDef name2 stroke:orange,fill:#FEF3BA,color:black,rx:20px,ry:20px; 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 document stroke:#2C5D98,fill:#33B0FF,color:2C5D98,rx:5px,ry:5px; classDef thing stroke:#2C5D98,fill:#D0E5FF,color:#2C5D98,rx:5px,ry:5px; classDef base stroke:black,fill:white,color:black,rx:5px,ry:5px; classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px; classDef event_bn stroke:#4A6719,fill:#D0DDBB,color:#4A6719,rx:20px,ry:20px; classDef event stroke:#5C811F,fill:#5C811F,color:white,rx:5px,ry:5px; classDef actor_bn stroke:#564F26,fill:#ffee8c,color:#564F26,rx:20px,ry:20px; O0("Dynamic Modeller") class O0 object; O1("Joseph Padfield") class O1 actor; click O1 "https://orcid.org/0000-0002-2572-6428" "Link to: https://orcid.org ..."; O0["Dynamic Modeller"] -- was created by -->O1["Joseph Padfield"] O2("https://mermaid-js.github.io/mermaid") class O2 url; click O2 "https://mermaid-js.github.io/mermaid" O0["Dynamic Modeller"] -- is based on -->O2["https://mermaid-js.github.io/mermaid"] O3("Zooming (toggle control in upper right of the model window)") class O3 name2; O0["Dynamic Modeller"] -- can toggle -->O3["Zooming (toggle control in upper right of the model window)"] O4("#34;Allow users to create modelling flow-diagrams from simple lists of triples#34;") class O4 note; O0["Dynamic Modeller"] -- designed to -->O4["#34;Allow users to create modelling flow-diagrams from
simple lists of triples#34;"] O5("Triples") class O5 literal; O0["Dynamic Modeller"] -- works with -->O5["Triples"] O6("Subgraphs") class O6 literal; O0["Dynamic Modeller"] -- can use -->O6["Subgraphs"] O7("Tooltips") class O7 document; O0["Dynamic Modeller"] -- allows the use of -->O7["Tooltips"] O7["Tooltips"] click O7 function "Also known as hover text or labels"; O8("Example Concept with a Tooltip") class O8 thing; O7["Tooltips"] -- for example -->O8["Example Concept with a Tooltip"] O8["Example Concept with a Tooltip"] click O8 function "This approach can be used to hide comments on larger flow diagrams to simplify their appearance but without loosing the extra descriptions and information."; O9("#34;Tooltips are added to link based nodes, with alternative texts, automatically, but they can also be added manually through an additional triple using the 'tooltip' property to link the item to the required text:#60;br/#62;Label tooltip Required hover text #34;") class O9 note; O7["Tooltips"] -- has comment -->O9["#34;Tooltips are added to link based nodes, with alternative
texts, automatically, but they can also be added manually
through an additional triple using the 'tooltip' property to
link the item to the required text:#60;br/#62;Label tooltip
Required hover text #34;"] O10("Links with alternative labels") class O10 literal; O0["Dynamic Modeller"] -- can format -->O10["Links with alternative labels"] O11("Example Formats") class O11 url; O10["Links with alternative labels"] -- for example -->O11["Example Formats"] O12("#34;This can be achieved by adding the alternative label as a #60;b#62;'|'#60;/b#62; separated suffix, such as:#60;br/#62;'ALT TEXT|https://full.url/or/link' #34;") class O12 note; O10["Links with alternative labels"] -- has comment -->O12["#34;This can be achieved by adding the alternative label as
a #60;b#62;'|'#60;/b#62; separated suffix, such
as:#60;br/#62;'ALT TEXT|https://full.url/or/link' #34;"] O13("https://github.com/ariutta/svg-pan-zoom") class O13 url; click O13 "https://github.com/ariutta/svg-pan-zoom" O0["Dynamic Modeller"] -- uses -->O13["https://github.com/ariutta/svg-pan-zoom"] O14("#34;svg-pan-zoom is used to allow users to use their mouse to navigate around and zoom in and out of larger models#34;") class O14 note; O13["https://github.com/ariutta/svg-pan-zoom"] -- has comment -->O14["#34;svg-pan-zoom is used to allow users to use their mouse
to navigate around and zoom in and out of larger models#34;"] subgraph ExampleSubgraphTitle ["Example Subgraph Title"] O15("Grouped sections of a graph") class O15 literal; O6["Subgraphs"] -- are -->O15["Grouped sections of a graph"] O16("#34;Subgraph are started by adding a special comment before the relevant triples - //Subgraph GROUP TITLE#34;#60;br/#62;#60;br/#62;#34;The GROUP TITLE or subgraph label is optional and can be hidden using the following syntax - //Subgraph //GROUP TITLE#34;#60;br/#62;#60;br/#62;#34;Alternatively the GROUP TITLE can be omitted completely - //Subgraph#34;") class O16 note; O6["Subgraphs"] -- has comment -->O16["#34;Subgraph are started by adding a special comment before
the relevant triples - //Subgraph GROUP
TITLE#34;#60;br/#62;#60;br/#62;#34;The GROUP TITLE or
subgraph label is optional and can be hidden using the
following syntax - //Subgraph //GROUP
TITLE#34;#60;br/#62;#60;br/#62;#34;Alternatively the GROUP
TITLE can be omitted completely - //Subgraph#34;"] O17("#34;Subgraph are ended by adding a special comment after the relevant triples - //end#34;") class O17 note; O6["Subgraphs"] -- has comment -->O17["#34;Subgraph are ended by adding a special comment after
the relevant triples - //end#34;"] O18("Sub-Subgraphs") class O18 literal; O6["Subgraphs"] -- can be nested as -->O18["Sub-Subgraphs"] subgraph ExampleSub-SubgraphTitle ["Example Sub-Subgraph Title"] O19("#34;Care needs to be taken to make sure which Subgraph nodes appear in, but it is possible to created nested sub-subgraphs simply by starting a new subgraph inside another one.#34;") class O19 note; O18["Sub-Subgraphs"] -- has comment -->O19["#34;Care needs to be taken to make sure which Subgraph nodes
appear in, but it is possible to created nested
sub-subgraphs simply by starting a new subgraph inside
another one.#34;"] end end subgraph FormattedSubgraph ["Formatted Subgraph"] O20("Styled Subgraphs") class O20 literal; O6["Subgraphs"] -- can be styled -->O20["Styled Subgraphs"] O21("#34;Any of the existing standard formats can automatically be applied to a subgraph by simply adding the name of the format after the //end line. For example this subgraph has been styled with the line //end base#34;") class O21 note; O20["Styled Subgraphs"] -- has comment -->O21["#34;Any of the existing standard formats can automatically
be applied to a subgraph by simply adding the name of the
format after the //end line. For example this subgraph has
been styled with the line //end base#34;"] end class FormattedSubgraph base O22("Tab separated") class O22 type; O5["Triples"] -- are -->O22["Tab separated"] O23("#34;Basic automatic formatting, but it is possible to force some further options using additional instructions after the third value in a given triple#34;") class O23 note; O5["Triples"] -- have some -->O23["#34;Basic automatic formatting, but it is possible to force
some further options using additional instructions after the
third value in a given triple#34;"] click O11 "https://research.ng-london.org.uk/modelling/#63;example=example_formats" "Link to: https://research.ng-london.org.uk/modelling ..."; O5["Triples"] -- format examples -->O11["Example Formats"] O24("#34;Start with data formatted as JSON, which is then automatically converted to Triples, please check the triples and report any errors in the conversion#34;") class O24 note; O0["Dynamic Modeller"] -- can also -->O24["#34;Start with data formatted as JSON, which is then
automatically converted to Triples, please check the triples
and report any errors in the conversion#34;"] O25("_BN-N1") class O25 event_bn; O26("Production") class O26 type; O25["_BN-N1"] -- has type -->O26["Production"] O27("#34;An automatic number each time the 'has type' property is used, so multiple _BN can be added to the list of triples and they will processed. All other properties will be allocated to the current _BN until a new 'has type' property is called.#34;") class O27 note; O25["_BN-N1"] -- are allocated -->O27["#34;An automatic number each time the 'has type' property is
used, so multiple _BN can be added to the list of triples
and they will processed. All other properties will be
allocated to the current _BN until a new 'has type' property
is called.#34;"] O0["Dynamic Modeller"] -- carries out -->O25["_BN-N1"] O28("Flow-diagrams") class O28 thing; O25["_BN-N1"] -- produces -->O28["Flow-diagrams"] O29("#34;Copying the triples and saving them as a text file.#34;") class O29 note; O28["Flow-diagrams"] -- can be saved by -->O29["#34;Copying the triples and saving them as a text file.#34;"] O30("#34;Bookmarking or copying the URL under the Bookmark Link options, under the Links menu, after an update.#34;") class O30 note; O28["Flow-diagrams"] -- can be saved by -->O30["#34;Bookmarking or copying the URL under the Bookmark Link
options, under the Links menu, after an update.#34;"] O31("Downloading an image") class O31 event; O28["Flow-diagrams"] -- can be saved by -->O31["Downloading an image"] O32("#34;Following the link under the Download Image link, under the Links menu, and using the options provided.#34;") class O32 note; O31["Downloading an image"] -- has comment -->O32["#34;Following the link under the Download Image link, under
the Links menu, and using the options provided.#34;"] O33("https://mermaid.ink/") class O33 url; click O33 "https://mermaid.ink/" O31["Downloading an image"] -- is achieved using -->O33["https://mermaid.ink/"] O34("The Mermaid Live Editor") class O34 event; O28["Flow-diagrams"] -- can also be edited in -->O34["The Mermaid Live Editor"] O35("#34;Following the link under the Mermaid Editor link, under the Links menu, and using the options provided.#34;") class O35 note; O34["The Mermaid Live Editor"] -- has comment -->O35["#34;Following the link under the Mermaid Editor link, under
the Links menu, and using the options provided.#34;"] O36("https://mermaid-js.github.io/mermaid-live-editor") class O36 url; click O36 "https://mermaid-js.github.io/mermaid-live-editor" O34["The Mermaid Live Editor"] -- has url -->O36["https://mermaid-js.github.io/mermaid-live-editor"] O37("_BN-N2") class O37 actor_bn; O38("Author") class O38 type; O37["_BN-N2"] -- has type -->O38["Author"] O39("#34;New Blank Nodes, or any other entities can refer back to a previous Blank Node by adding a suffix to indicate how many Blank Nodes back one wants to refer to, i.e. the previous blank node would be referenced as '_BN-1' and the one before that would be '_BN-2' and so on.#34;") class O39 note; O37["_BN-N2"] -- has comment -->O39["#34;New Blank Nodes, or any other entities can refer back to
a previous Blank Node by adding a suffix to indicate how
many Blank Nodes back one wants to refer to, i.e. the
previous blank node would be referenced as '_BN-1' and the
one before that would be '_BN-2' and so on.#34;"] O37["_BN-N2"] -- assigned -->O25["_BN-N1"] O40("Free Font Awesome 5 Icons") class O40 url; click O40 "https://fontawesome.com/v5/icons/" "Link to: https://fontawesome.com/v5 ..."; O0["Dynamic Modeller"] -- can display -->O40["Free Font Awesome 5 Icons"] O41("far:fa-user-circle far:fa-heart fab:fa-creative-commons fas:fa-code") class O41 literal; O40["Free Font Awesome 5 Icons"] -- for example -->O41["far:fa-user-circle far:fa-heart fab:fa-creative-commons
fas:fa-code"] O42("The Font Awesome icons can be added by formatting the icon details, provided on the Font Awesome website, like:#60;br/#62;far : fa-user-circle#60;br/#62;(without the spaces around the colon).") class O42 note; O41["far:fa-user-circle far:fa-heart fab:fa-creative-commons
fas:fa-code"] -- has note -->O42["The Font Awesome icons can be added by formatting the icon
details, provided on the Font Awesome website,
like:#60;br/#62;far : fa-user-circle#60;br/#62;(without the
spaces around the colon)."] O43("Flowchart TB") class O43 url; click O43 "https://research.ng-london.org.uk/modelling/#63;example=TBNF" "Link to: https://research.ng-london.org.uk/modelling ..."; O0["Dynamic Modeller"] -- can be formatted with -->O43["Flowchart TB"] O44("#34;In addition to the default left-right (LR) orientation diagrams can also be arranged from the top-bottom (TB)#34;") class O44 note; O43["Flowchart TB"] -- has comment -->O44["#34;In addition to the default left-right (LR) orientation
diagrams can also be arranged from the top-bottom (TB)#34;"] O45("Fixed Properties") class O45 url; click O45 "https://research.ng-london.org.uk/modelling/#63;example=LRF" "Link to: https://research.ng-london.org.uk/modelling ..."; O0["Dynamic Modeller"] -- can be formatted with -->O45["Fixed Properties"] O46("#34;This format extends and straightens the lines linking the various concepts together to ensure there is a flat section of the line for the link property to be specifically fixed to. This can result in a larger overall diagram, but can be required when there are higher numbers of property links being displayed together#34;") class O46 note; O45["Fixed Properties"] -- has comment -->O46["#34;This format extends and straightens the lines linking
the various concepts together to ensure there is a flat
section of the line for the link property to be specifically
fixed to. This can result in a larger overall diagram, but
can be required when there are higher numbers of property
links being displayed together#34;"] ;