### Training Diagrams Directory Listing Source: https://context7.com/jgraph/drawio-diagrams/llms.txt Lists various .xml files located in the training-diagrams/ directory, including examples for basic tree diagrams, connectors, layers, and links/tooltips. ```bash # Training diagrams (located in training-diagrams/ directory): training-diagrams/drawio-basic-tree-diagram.xml training-diagrams/drawio-connectors-examples.xml training-diagrams/drawio-layers-example.xml training-diagrams/draw.io-links-and-tooltips-example.xml ``` -------------------------------- ### Use Diagrams as Templates via URL Source: https://context7.com/jgraph/drawio-diagrams/llms.txt Use the `create` parameter with a URL-encoded raw GitHub URL to use a diagram as a starting template for a new diagram. This allows users to quickly create new diagrams based on existing structures. ```bash https://app.diagrams.net/?create={URL_ENCODED_RAW_GITHUB_URL} ``` ```bash https://app.diagrams.net/?create=https%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-diagrams%2Fdev%2Fdiagrams%2Fschema.xml ``` -------------------------------- ### Blog Diagrams Directory Listing Source: https://context7.com/jgraph/drawio-diagrams/llms.txt Lists various .drawio files located in the blog/ directory, showcasing examples of Git workflow, AWS architecture, Azure diagrams, BPMN processes, UML class diagrams, organization charts, Gantt charts, mind maps, threat models, and data flow diagrams. ```bash # Blog diagrams (located in blog/ directory): blog/gitflow-examples.drawio # Git workflow diagrams blog/aws-robot.drawio # AWS architecture examples blog/azure-architecture-example.drawio # Azure diagrams blog/bpmn-2-example.drawio # BPMN process diagrams blog/uml-class-diagram-*.drawio # UML class diagrams blog/org-chart-examples.drawio # Organization charts blog/gantt-*.drawio # Gantt chart examples blog/mindmap-*.drawio # Mind map examples blog/threat-modelling.drawio # Security threat models blog/data-flow-diagram-*.drawio # Data flow diagrams ``` -------------------------------- ### Load Diagrams with Tooltips Plugin Source: https://context7.com/jgraph/drawio-diagrams/llms.txt Enable the tooltips plugin by including `?p=tips&lightbox=1&edit=_blank` in the URL when opening diagrams that contain tooltip metadata. This enhances the interactivity of diagrams by displaying tooltips. ```bash https://app.diagrams.net/?p=tips&lightbox=1&edit=_blank#U{URL_ENCODED_RAW_GITHUB_URL} ``` ```bash https://app.diagrams.net/?p=tips&lightbox=1&edit=_blank#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-diagrams%2Fdev%2Fdiagrams%2Ftooltips.xml ``` -------------------------------- ### Basic mxfile XML Structure Source: https://context7.com/jgraph/drawio-diagrams/llms.txt Illustrates the fundamental structure of an mxfile XML document, including host, modification time, agent, version, and type attributes, along with a placeholder for compressed diagram data. ```xml 7VhZc9MwEP41Hp5gfLRO8ojTpgVCB2ihw6NiK7aI7DWynINfzyqWYzsOOYD0yDQv0a43K2m/b4/YcPrx/EqQ... ``` -------------------------------- ### Load Diagrams Directly via URL Source: https://context7.com/jgraph/drawio-diagrams/llms.txt Append a URL-encoded raw GitHub URL of a diagram to the diagrams.net application URL to open it directly. This is useful for sharing or embedding diagrams. ```bash https://app.diagrams.net/#U{URL_ENCODED_RAW_GITHUB_URL} ``` ```bash https://app.diagrams.net/#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-diagrams%2Fdev%2Fdiagrams%2Fschema.xml ``` ```bash https://app.diagrams.net/#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-diagrams%2Fdev%2Fdiagrams%2Fsvgfile.svg ``` ```bash https://app.diagrams.net/#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-diagrams%2Fdev%2Fdiagrams%2Fi18n.xml ``` -------------------------------- ### Basic CSV Import Configuration for Diagrams Source: https://context7.com/jgraph/drawio-diagrams/llms.txt Configure CSV import for diagrams.net using special comments (`##` for comments, `#` for settings) to define labels, styles, connections, and layout. This allows for automated diagram generation from tabular data. ```csv ## Configuration for CSV import ## Use ## for comments and # for configuration settings # # label: %name% # style: whiteSpace=wrap;html=1;rounded=1;fillColor=#ffffff;strokeColor=#000000; # namespace: csvimport- # connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;" # width: auto # height: auto # padding: 5 # ignore: id,refs # nodespacing: 60 # levelspacing: 60 # edgespacing: 40 # layout: auto ## CSV data starts below this line name,id,refs Cell A,idCellA,"idCellB,idCellC,idCellD" Cell B,idCellB,"" Cell C,idCellC,"idCellB,idCellD" Cell D,idCellD,"" ``` -------------------------------- ### Multi-page mxfile XML Structure Source: https://context7.com/jgraph/drawio-diagrams/llms.txt Demonstrates the mxfile XML structure for diagrams spanning multiple pages, indicating the total number of pages and providing separate diagram elements for each page. ```xml ``` -------------------------------- ### CSV Import for Gitflow Diagram Source: https://context7.com/jgraph/drawio-diagrams/llms.txt Generate complex Gitflow diagrams from CSV data using diagrams.net. This configuration uses specific comments to define labels, connections, and branch styles, enabling the creation of detailed branching diagrams. ```csv ## Gitflow diagram configuration # label: %version% # namespace: csvimport- # connect: {"from":"branched", "to":"entry", "style": "rounded=1;dashed=1;endArrow=none;endFill=0;startArrow=none;edgeStyle=elbowEdgeStyle;" # stylename: branch ``` -------------------------------- ### CSV Import with Custom Styles Source: https://context7.com/jgraph/drawio-diagrams/llms.txt Define and apply custom styles to shapes during CSV import in diagrams.net. Use the `styles` and `stylename` configuration options to conditionally style elements based on data. This enables visually distinct elements based on their attributes. ```csv ## CSV Import with custom styles # label: %name%
%styletype% # styles: {"style1": "fillColor=#FFE6CC;strokeColor=#D79B00;rounded=0;html=1;", "style2": "fillColor=#DAE8FC;strokeColor=#6C8EBF;rounded=1;html=1;", "style3": "fillColor=%fill%;strokeColor=%stroke%;rounded=1;html=1;"} # stylename: styletype # namespace: csvimport- # connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;" # width: auto # height: auto # padding: 5 # ignore: id,refs # link: url # nodespacing: 60 # levelspacing: 60 # edgespacing: 40 # layout: auto ## CSV data with style assignments id,name,styletype,fill,stroke,refs 1,Cell A,style1,,,"2,3,4" 2,Cell B,style2,,,"3,4" 3,Cell C,style3,#D5E8D4,#82B366,"" 4,Cell D,style3,#F8CECC,#B85450,"" ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.