### Run Basic draw.io Docker Container Source: https://www.drawio.com/docs/security/diagrams-docker-app This command starts a basic draw.io Docker container, exposing the application on ports 8080 and 8443. It's suitable for initial setup and testing. ```bash docker run -it --rm --name="draw" -p 8080:8080 -p 8443:8443 jgraph/drawio ``` -------------------------------- ### Install MCP Tool Server Source: https://www.drawio.com/docs/manual/generate/drawio-mcp-server Install the MCP tool server using npm. This package allows MCP clients to generate and open draw.io diagrams. ```bash npx @drawio/mcp ``` -------------------------------- ### Example Dependency Graph from Gemfile Source: https://www.drawio.com/docs/diagram-types/dependency-graphs Visualizes three levels of dependencies from a Gemfile, as seen on GitHub. This helps understand build system dependencies. ```text www.diagrams.net-source->jekyll jekyll->addressable jekyll->colorator jekyll->em-websocket ... ``` -------------------------------- ### Network Diagram with Groups Example Source: https://www.drawio.com/docs/reference/diagram-generation/style-reference Creates a network diagram featuring groups (swimlanes) for different network segments like DMZ and Internal Network. This example demonstrates placing elements like firewalls and servers within these groups and connecting them. ```xml ``` -------------------------------- ### Set Default Page Format Source: https://www.drawio.com/docs/reference/configure-diagram-editor Configure the default page format for new diagrams. This example sets the page format to DIN A3. ```json {"pageFormat": {"width": 1169, "height": 1654}} ``` -------------------------------- ### Specify Diagram Type: Flowchart Source: https://www.drawio.com/docs/best-practice/write-query-generate-diagram Use simple and direct language to describe the diagram's content. This example defines a flowchart for a customer sign-up process. ```plaintext flowchart - A customer signs up for a 14-day trial software license. After 10 days, a sales engineer contacts the customer to learn their requirements, then writes the customer a quote. If the customer does not accept the quote, their software license is invalidated on day 15. If the customer accepts the quote, they can continue to use the software. ``` -------------------------------- ### Specify Diagram Type: Sequence Diagram Source: https://www.drawio.com/docs/best-practice/write-query-generate-diagram Start your query by specifying the desired diagram type to limit the generator's output. This example sets the type to 'sequence diagram'. ```plaintext sequence diagram - a customer purchases a product from an online store ``` -------------------------------- ### Generate a Sequence Diagram Source: https://www.drawio.com/docs/manual/generate Use this prompt format to generate a sequence diagram. Ensure the diagram type is specified at the beginning of the description. ```text sequence diagram - a customer purchases a product from a web store ``` -------------------------------- ### UML Class Diagram Example Source: https://www.drawio.com/docs/reference/diagram-generation/style-reference Defines a UML class diagram with abstract and concrete classes, including attributes and methods. This example shows how to represent inheritance relationships between classes. ```xml ``` -------------------------------- ### Configure diagrams.net editor Source: https://www.drawio.com/docs/reference/supported-location-hash-properties Use '_CONFIG_' followed by compressed JSON data to configure the diagrams.net editor settings. ```url _CONFIG_{compressed-json} ``` -------------------------------- ### mxGraphModel adaptiveColors Attribute Example Source: https://www.drawio.com/docs/reference/diagram-generation/style-reference Example of setting the 'adaptiveColors' attribute on the mxGraphModel element. This attribute controls color adaptation for light/dark mode viewing and is typically not set by AI generators. ```xml ``` -------------------------------- ### Simple Flowchart Diagram Example Source: https://www.drawio.com/docs/reference/diagram-generation/style-reference An example of a complete flowchart diagram defined using mxGraphModel. It includes various shapes like ellipses, rhombuses, and rounded rectangles, connected by styled edges with labels. ```xml ``` -------------------------------- ### Gantt Chart with Tasks and Dependencies Source: https://www.drawio.com/docs/manual/mermaid Creates a Gantt chart to track project tasks, dependencies, and timelines. Supports task states and date formatting. ```mermaid gantt title Example Gantt diagram dateFormat YYYY-MM-DD section Team 1 Research & requirements :done, a1, 2020-03-08, 2020-04-10 Review & documentation : after a1, 20d section Team 2 Implementation :crit, active, 2020-03-25 , 20d Testing :crit, 20d ``` -------------------------------- ### Example Shape Style Definition Source: https://www.drawio.com/docs/reference/shortcuts/shortcut-styles This is an example of how a shape's style is represented as key/value pairs, separated by semicolons. It demonstrates various styling properties like stroke width, fill color, and arrow types. ```text endArrow=classic;dashed=1;html=1; strokeWidth=3;fillColor=#f8cecc;strokeColor=#b85450; startArrow=circlePlus;startFill=0;endFill=0; ``` -------------------------------- ### Enable Snap to Point via UI Source: https://www.drawio.com/docs/manual/connectors/snap-to-point Enable the 'Snap to Point' option in the Style tab of the format panel to make connectors snap to anchor points. ```text Snap to Point ```