PHPackages sandstorm/mxgraph - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. sandstorm/mxgraph ActiveNeos-plugin[Utility & Helpers](/categories/utility) sandstorm/mxgraph ================= Integrate Diagrams.net / Draw.io into Neos as Node Type for creating interactive diagrams and flowcharts 4.0.1(12mo ago)246.9k8[1 issues](https://github.com/sandstorm/MxGraph/issues)PHP Since Dec 2Pushed 2mo ago4 watchersCompare [ Source](https://github.com/sandstorm/MxGraph)[ Packagist](https://packagist.org/packages/sandstorm/mxgraph)[ RSS](/packages/sandstorm-mxgraph/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)Dependencies (3)Versions (33)Used By (0) Diagrams.net / Draw.io ====================== [](#diagramsnet--drawio) (formerly known as MXGraph, that explains the name of this package). **Integrates diagrams.net / Draw.io into Neos as Node Type for creating interactive diagrams and flowcharts** **Thanks to the awesome people from diagrams.net / Draw.io - without them this project would not be possible.** Demo ---- [](#demo) [![graphdemo](https://cloud.githubusercontent.com/assets/190777/20837205/53770d2a-b8a3-11e6-8c89-2f925c55e894.gif)](https://cloud.githubusercontent.com/assets/190777/20837205/53770d2a-b8a3-11e6-8c89-2f925c55e894.gif) Features -------- [](#features) - provides a Node Type "Diagram" which contains the rendered representation for the diagram and the internal xml code - you can click an inspector button opening the graph editor - when you save, the graph data is directly stored inside the Node - when you save the graph, Neos refreshes automatically - (new since 3.x) all diagrams.net features supported - (new since 3.x) customization of diagrams.net editor possible - (new since 3.x, optional) auto-updates can be enabled by using embed.diagrams.net - (new since 3.x) renders diagram as embedded SVG; so you can f.e. click links - (new since 3.x) Import .drawio, .svg, .png files How to install -------------- [](#how-to-install) - Neos 8.x: `composer install sandstorm/mxgraph` - Version 3.x - Neos 9.x: `composer require sandstorm/mxgraph` - Version 4.x then, enjoy :-) Upgrading from Sandstorm.MxGraph 2.x to 3.x ------------------------------------------- [](#upgrading-from-sandstormmxgraph-2x-to-3x) In Sandstorm.MxGraph >= 3.0, we do not render the diagram as SVG image embedded via the ``-Tag, but instead directly embed the SVG at that location. This has the benefit that f.e. [links inside the diagram](https://www.diagrams.net/doc/faq/insert-text-link)) will work as expected. If you update from 2.x to 3.x, this change might break your styling. To get the old behavior back, set the following `fusion` configuration: ``` prototype(Sandstorm.MxGraph:Diagram) { // BACKWARDS COMPATIBILITY: to get the old (2.x) behavior back, set to false. renderAsInlineSvg = false } ``` You need to open and save diagrams created with version <= 2.X to render them as inline SVGs, because the internal storage format of the Node changed to enable this functionality (and this is only re-written on save). Custom Draw.io Configuration ---------------------------- [](#custom-drawio-configuration) Diagrams.net / Draw.io is very customizable (custom fonts, colors, presets, ...) - lots of configuration options [documented here](https://www.diagrams.net/doc/faq/configure-diagram-editor). These config options can be set via `Settings.yaml` at `Sandstorm.MxGraph.drawioConfiguration`, for example, the following sets up draw.io with colors and fonts for Neos.io: ``` Sandstorm: MxGraph: # You can configure the diagram editor as explained here: https://www.diagrams.net/doc/faq/configure-diagram-editor # !! lots of options possible - see docs for details. drawioConfiguration: customFonts: - fontFamily: Work Sans fontUrl: https://fonts.googleapis.com/css?family=Work+Sans # Colour codes to be added before presetColors (no leading # for the colour codes, null for a blank entry) customPresetColors: - '26224C' - '00ADEE' # colorNames: Names for colors, eg. {‘FFFFFF’: ‘White’, ‘000000’: ‘Black’} that are used as tooltips (uppercase, no leading # for the colour codes). colorNames: 26224C: Neos Dark Blue 00ADEE: Neos Light Blue # Available colour schemes in the style section at the top of the format panel (use leading # for the colour codes). # Possible colour keys are fill, stroke, gradient and font (font is ignored for connectors). An optional title can # be added to be used as a tooltip. An optional border can be added to define the CSS for the border width and type, # eg. ‘2px solid’ or ‘3px dashed’ (only setting the border width is not valid, the border type must be included). customColorSchemes: # !! the 1st array level is the **page**, then come the entries. - - title: Neos Light Blue solid fill: '#00ADEE' stroke: white border: 1px solid font: white - title: Neos Dark Blue solid fill: '#26224C' stroke: white border: 1px solid font: white - title: Neos Light Blue border fill: '#ffffff' stroke: '#00ADEE' border: 2px solid font: '#00ADEE' ``` Importing files --------------- [](#importing-files) In the inspector, there is a button to import a drawio file. This works for: - .drawio files - .drawio.png files (PNG files where the diagram is embedded) - .drawio.svg files (SVG files where the diagram is embedded) Further Customization of embed mode via URL parameters ------------------------------------------------------ [](#further-customization-of-embed-mode-via-url-parameters) Until version <= 2.x, we've used a repository as basis. This has been discontinued at 9.11.2020; and the code has been merged into . For version 3, the implementation has been completely re-done; and it looks like this: ``` ┌────────────────────────────────────────┐ │ │ │ ┌────────────────────────────────┐ │ │ │ embed.diagrams.net │ │ │ │ - Diagram Editor - │ │ │ │ │ │ │ └────────────────────────────────┘ │ │ outer shell │ │ (communicates with diagrams.net in │ │ iFrame, and with Neos) │ └────────────────────────────────────────┘ ``` We follow the documentation of the [embed mode](https://www.diagrams.net/doc/faq/embed-mode). The outer shell embeds diagrams.net in an iFrame, and communicates initially via URL parameters, and then via postMessage API. We use the following URL parameters: - embed=1: enables embed mode, required - configure=1: allows to inject [draw.io configuration](https://www.diagrams.net/doc/faq/configure-diagram-editor) from the outside, required. - proto=json: modern, json-based postMessage API, required. On top, the following optional URL parameters are set by default, but could be disabled / overridden via Settings.yaml at key `Sandstorm.MxGraph.drawioEmbedParameters`: - ui=simple: Use the modern UI theme. the other themes are [listed here](https://www.diagrams.net/doc/faq/editor-theme-change) - lockdown=1: Ensure no data is transmitted to external services. [see this explanation](https://www.diagrams.net/blog/data-governance-lockdown) - stealth=1: Disables all features that require external web services (such as PDF export). - test=1: if enabled, debug logs are printed to the console. - math=0: disables MathML support. (MathML is disabled for fully-disconnected mode; because it would grow the Neos package considerably). Fully-Disconnected Mode ----------------------- [](#fully-disconnected-mode) By using embed.diagrams.net in the iFrame, you get the following properties: *Pros*: - Auto-updated to new versions of diagrams.net, so you can use the latest features - Integration path is officially supported by the diagrams.net team - All cloud features (like PDF export) can be enabled if you want. - All features can be used. *Cons*: - While the diagram data is not leaving your local computer (for almost all use cases), the IP address of your editors is still sent to embed.diagrams.net. We believe this constitutes personal data under the GPDR; so you need to ask for consent from your editors. That's why we additionally have implemented **a fully-disconnected mode:** There, the full draw.io application has been bundled **inside this Neos package, with no external calls being made.**We cannot be 100% sure that all Draw.io functionality will work, but we did not find any problems so far. That's why the **fully disconnected mode is enabled by default, by setting `Sandstorm.MyGraph.drawioEmbedUrl=LOCAL`** License ------- [](#license) GPL v3 Created with ❤ by sandstorm|media 2016-2025. ### Health Score 53 — FairBetter than 97% of packages Maintenance70 Regular maintenance activity Popularity34 Limited adoption so far Community18 Small or concentrated contributor base Maturity74 Established project with proven stability Bus Factor1 Top contributor holds 84.6% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~281 days Recently: every ~465 days Total 12 Last Release 363d ago Major Versions 1.0.x-dev → 2.0.02017-12-26 2.1.3 → 3.0.02023-03-02 3.1.0 → 4.0.02025-05-21 ### Community Maintainers ![](https://www.gravatar.com/avatar/2ced0d63cfdae881c32128c7f66451a013d3e24d9eed210d6a846b6d8e95fa3b?d=identicon)[sandstorm](/maintainers/sandstorm) --- Top Contributors [![skurfuerst](https://avatars.githubusercontent.com/u/190777?v=4)](https://github.com/skurfuerst "skurfuerst (104 commits)")[![JamesAlias](https://avatars.githubusercontent.com/u/1615332?v=4)](https://github.com/JamesAlias "JamesAlias (7 commits)")[![markusguenther](https://avatars.githubusercontent.com/u/1014126?v=4)](https://github.com/markusguenther "markusguenther (7 commits)")[![Jan3k3y](https://avatars.githubusercontent.com/u/99957086?v=4)](https://github.com/Jan3k3y "Jan3k3y (2 commits)")[![rolandschuetz](https://avatars.githubusercontent.com/u/735982?v=4)](https://github.com/rolandschuetz "rolandschuetz (2 commits)")[![ahaeslich](https://avatars.githubusercontent.com/u/1756367?v=4)](https://github.com/ahaeslich "ahaeslich (1 commits)") --- Tags drawiohacktoberfestneoscms ### Embed Badge ![Health badge](/badges/sandstorm-mxgraph/health.svg) ``` [![Health](https://phpackages.com/badges/sandstorm-mxgraph/health.svg)](https://phpackages.com/packages/sandstorm-mxgraph) ``` ### Alternatives [sitegeist/monocle An living-styleguide for Neos that is based on the actual fusion-code 45315.9k10](/packages/sitegeist-monocle)[sitegeist/kaleidoscope Responsive-images for Neos 29352.4k10](/packages/sitegeist-kaleidoscope)[kaufmanndigital/gdpr-cookieconsent A ready-to-run package, that integrates an advanced cookie consent banner into your Neos CMS site. 2540.7k](/packages/kaufmanndigital-gdpr-cookieconsent)[neos/seo SEO configuration and tools for Neos 13990.5k24](/packages/neos-seo)[shel/neos-colorpicker A plugin for Neos CMS which provides a colorpicker editor 1494.4k6](/packages/shel-neos-colorpicker)[shel/neos-hyphens A plugin for Neos CMS which provides hyphens for the inline editor 20200.7k1](/packages/shel-neos-hyphens) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)