Skip to main content

<DrawIO />

View as Markdown

The <DrawIO /> component renders a DrawIO diagram in your documentation.

Support

The <DrawIO /> component is supported in domains, services, all messages and custom documentation.

Usage

  1. Include the <DrawIO /> component inside the markdown
    • e.g /events/MyEvent/index.mdx

Basic Example

---
#event frontmatter
---

<DrawIO url="https://viewer.diagrams.net/?border=0&tags=%7B%7D&lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=Untitled%20Diagram.drawio&dark=auto#R%3Cmxfile%3E%3Cdiagram%20id%3D%22yPxyJZ8AM_hMuL3Unpa9%22%20name%3D%22complex%20gitflow%22%3E7V1dm6I2FP41c6kP4ZvL0dHd7bbbbWf7tNubPhmJSheIhTjj7K9vwoeiiRgREGfZi1kJECDvez5yzoHcaeNg8y6Cq%2BUv2EX%2Bnaq4mzvt4U5VgaIq9D%2FW8pq2mEBLGxaR52YH7Roeve8oPzNrXXsuivcOJBj7xFvtN85wGKIZ2WuDUYRf9g%2BbY3%2F%2Fqiu4QFzD4wz6fOufnkuWWStQlN2O98hbLLNL20a2I4D5wVlDvIQufik0aZM7bRxhTNJfwWaMfDZ4%2Bbik502P7N3eWIRCInPC%2Bs8%2Fwk%2BTB%2FP9xFfhR2Puwg9PAyvt5Rn66%2ByB32My9za0bYyDwCPZvZPXfEAI2tDLjZYk8GkDoD9jEuFvaIx9HNGWEIf0yNHc8%2F2DJuh7i5BuzugNI9o%2BekYR8ehQ32c7As912WVGL0uPoMcVnLFrvlBi0TZMj577yQAu6XGInjDihyAbFdYz2hSasiF5h3CASPRKD8n26qo1VI30rIyilKTp9ssOcDsDcVmAWsvaYEaxxbbzHQr0RwbEGaDYHCgcCsilLM02cUSWeIFD6E92raMIr0MXscso%2B3D9iwh5zQQNrglmY7vt4WeMV9lxKx964eApuYcRCt17Jk07NGnL1GPPlfSfciCXEJ1jxR0dreRfciYdpL%2ByE5ONr2xjaOSbD5vizofX4tZnFHl0lBl%2FksajFIjxOpqhklHONQyB0QJl5zrL0cfPD9%2BxR15WH0bu9%2BnDb9YAZHRgYy5DKdVROUoBcJwrWUefsUcfYUdM%2FXQv6a1nJx6Qbntf1XnoVKDdbB09J6wDZRxEG4%2F8VfhdIADdOsT4JGH4E8rZKisCPKvnOCTZicConX7iAw1J%2BkXIh8R73jdctSun%2FL7LtFOu2H%2BGT8j%2FjGOPeJgp%2BCdMCA4Emp%2BwIedtyp4%2BWcIV6z7YLJinMWS2YLaEERnicMCs8D8RmiOKAxv1feVFT3A9ClCJiaL6aWRMtCkq1Vw12BvV5MQaOLy90Vq1NxKQXiT5QuESCGFRQ5xtcLpiVnIv9aRcK07dgi22JJamD3Vn9%2B%2B6RgUoxvXJVWp%2BdjxhG6%2BFjbMN0zmUO5%2FxzBhNYeD5rN8xJaZHO1OVT%2Bgl27mnwxynXIfVyWy9WyYr19I3b7KOmyaRMZvUY7JMtXsma6s83yCmGkUV3DeLqW2C7mGq1uGGXDzvFXkW5Zr5KB4SmlJSUeag1jK1BHmM6lgXqSlozgXQOKADKicc2F0KNRUnftuJYHar4JQtrkNgtQNhVThhNQTCqqtNCaterxd3QXDgBub6hqw%2BsLrlOBm3Y2RX62jl1%2BE6PRgTO7mLGqRW05yhdaCvbXBlM2t2RnLfYljPkhX12mf%2Fl7GCzwT1on5WIkk3uyfqdi%2FqDYq6IyvqoFuifkNT506KuqF3z6qrfAwfDMFQGVBOIRijBiZXPpqTNzG1snk0%2BVCIqgvgVJuC05IIWZ4bC2klC1NdnZqy6tSSDZq0o06tKvmMGpDJLOp2o9XUw56T0ALmHUuCOzVHP%2FocVks5LGnC2WqnCGf2PtuF0zPATc8088o%2Bm1VLod%2B16y6qC6MlWwJldSssat1QCVQnhdEAeueEMc9%2B3rYwtmxOLdlop9Mt%2F83qo50XSrDTPQkGSs3hzkumZT%2BEN%2B1I5zUV2Rr6luZvfWLzwpowp4PuNG%2FBXfSMfApLH%2Fw8Gvy0eBx1DkcH8Dg2FvvMQ%2Bk%2FUOwzjzacDkt0q7I2v%2B9ej1b1oxTlUP50nS%2FtancmZF3fjeqDm1W0iC6pRTo2G8vvu9ciVb0xADqnRWzeG%2Fvpw%2B%2F3A80YDNAGBmwUVWWOIFlHfXa61EE7RNbgkG03OW3z0ZMvS4Zm5m4HKKk2x2wc4lWU1p4%2FRTCcLW8UaKWKvj4DY4Nzwm3eCW8ZZD458ZWyuyizPaZnYaqbVxdcPouYCu62SKiHtPSlKU5MlWsXCjl8LiqFNH2jZoun6bPRf6Lyay7Idjh6hLlSMO5jMLwfBQqlvu2ALBMR2c1OZj6MY29W5v6e9FzOHuSTc4kTbyrlbRe%2B7E4lktO7hp67UCdecOM%2FwmIIejvoq%2BmPsEiEWHrs0xMECtrSqyGvWaf7ahp5%2FjXJHnkxWipf3aPmCf1zkVf51AbXV%2BPfyOAV%2Fhe4uNPuaVtS1t2A%2BW7uXdkaDLPhKNz76pbAMoM2fS%2Bg8BJagEn58WBS%2BY%2BWiWCy2kVJotijr%2Bw59g2Xm8vtb%2B%2B8DydXlGJBcv%2Fq7zcBUOU1i7645xINYEprgI69y6xI1HL2GqBEA1j8TKoDGoBHteBtqT%2Bet2UD3tsy7Ws7xTJfEmhp2pqXEexKB77eFSoHhGUEUgpz%2Fhj%2BbTyHX7%2FE%2Ftj4BKOPQfTPQDap3s6U2ALcF75MzagaCBP0piuNhUOEw9vHQGWhtxWuHECzKgIv6kttLAIqBF7kzqfpjHgFwz0GmP%2Bt2ef0R0zxDzIdzsxDpsa3%2B%2FMsyBQlyxXMI8RSJtTfow%2FluvRviAmKE3SSRCd8wms2KCRJrawiPEMx243n9E%2BAooUXLthjhEkXRJhTG4qSMGkLHZb0UW4qN6PK5Gbq%2B3KyJYrI8hlVYGpbTVWULdM8LkayBq9M7Qvo6XrPQnbyPNwndCPcPMzao3h4lH7b5uQJelKW1W%2BqQ3P%2F03y6zZNSB7aQlFpTpJR4XbiFEmoRMHWuCFHdV8u8ZImprSZp2i%2FNYAg%2Bsmsf%2BOhH7Cx1eeBr4bAVOyCudKmjOZGTp9Af6X3UavpFL0hXM%2F2MLArj3yBOCJlMGsFqI1THE8hKJig7FgmwqwjFKBlSBaYq1l3PknDB1sof16U3oTVBu1rT0Q9qGoEhmLaqouiCfbbC%2FCNG0a9P%2F7LFoVTFZ9Ge9NTJtgjV9eAigkFCkCgD%2BQVH35IRo%2Bh5dH4Ao9wI7%2BjyziOD9JgdgZSEWuwWfS%2F8ll5pSQhbreqe3aE6DZ89NJxhernpCseMVVM4iNczZrbna3%2BwoL2mJpoa7kGQrqg1TfvMhUW4To1aGPNMuHjiidhxqLEPqltzkpg1RS04VSL4li1blqmmEhu6WaBAKSVyIWYEWEZovqdY6kHxUNXU1Guue%2BC%2B4mmdg1oNHKyBY9tswevBdjF4abTOr0eErqcerG5Aw4u%2FEBy1QfHnfA%2Fxsl8SacQ%2B4JRiavGL6B06r9IBJ0FfupwjXMHrFCN%2FfEr%2FViJOfQyqmvIy%2BPUXBHkxYIq9F7tEsmSn%2B2LXrxuvTB9%2BW%2FcWFvEqXfLxCp%2F2FWtFw%2BTq3xpcuKt0TG4hqX5kxR2qDSb35sg0Oe3FltexDd0Q5NWn9ngyHtejP3Ref7S57I4QV5PXHXtFjIBD%2BY2n1XXVPgxPNFfDSDd3S0CnorpbSFub%2FA8%3D%3C%2Fdiagram%3E%3C%2Fmxfile%3E" />

Output example in EventCatalog

Example output

Props

NameTypeDefaultRequiredDescription
urlstringYesThe URL of the DrawIO diagram to embed. To get the URL, click "File", "embed", then "Notion...", copy the URL to the component.