PHP download

Download the PHP package wwwision/neos-mermaideditor without Composer

On this page you can find all versions of the php package wwwision/neos-mermaideditor. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

Table of contents
Download wwwision/neos-mermaideditor
More information about wwwision/neos-mermaideditor
Files in wwwision/neos-mermaideditor

Vendor wwwision
Package neos-mermaideditor
Short Description Edit end render Mermaid diagrams in Neos
License MIT

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:

If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.

Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
To use Composer is sometimes complicated. Especially for beginners.
Composer needs much resources. Sometimes they are not available on a simple webspace.
If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.

Please rate this library. Is it a good library?

Example code of wwwision/neos-mermaideditor

Informations about the package neos-mermaideditor

Neos Mermaid Editor

A custom Neos CMS inspector editor for authoring Mermaid diagrams, plus a Fusion component for rendering them on the frontend.

The editor renders a source <textarea> next to a live Mermaid preview. On Apply it can optionally pre-render the diagram to an SVG and persist it alongside the source, so the frontend can serve the SVG directly without loading Mermaid in the browser.

Screenshots

Empty	Live preview	Syntax error

Features

React-based inspector editor: source textarea + live, debounced Mermaid preview.
Inline error display for invalid diagram syntax (never blocks saving).
Optional server-of-record SVG: the rendered SVG is generated on Apply via a Neos UI save hook and stored next to the source.
Frontend Fusion component (Wwwision.Neos.MermaidEditor:Diagram) that:
- serves the stored SVG directly when available, or
- renders the source client-side (Mermaid loaded on demand), including diagrams injected later via the Neos backend's out-of-band re-rendering.

Requirements

Neos CMS / Neos UI ^8
Node.js + npm (only to build the editor plugin, see Development)

Installation

Install the package via composer (from a Neos distribution root):

The package ships a pre-built editor plugin (Resources/Public/MermaidEditor/Plugin.js), so no build step is required for plain usage. If you change the editor sources, rebuild it as described under Development.

Usage

1. Use the editor on a node property

Reference the editor on any string property in a NodeType definition:

2. Render the property on the frontend

Pass the decoded property value into the Wwwision.Neos.MermaidEditor:Diagram component:

The component handles three cases:

State	Output
empty / unset	nothing on the frontend; an editing hint in the backend
envelope contains `svg`	the stored SVG, inline (no client-side Mermaid)
source only	client-side render via `Resources/Public/MermaidDiagram.js`

Editor options

Option	Type	Default	Description
`renderSvg`	`bool`	`false`	When `true`, the rendered SVG is generated on Apply and stored alongside the source. The frontend then serves that SVG directly. When `false`, only the source is stored and the diagram is rendered client-side on the frontend.

Stored data format

The property value is always a JSON envelope:

When renderSvg is enabled, the svg key is added on Apply:

If the source is syntactically invalid at Apply time, the SVG is omitted (the envelope stays source-only) so that saving is never blocked.

How it works

Editor (`Resources/Private/Scripts/MermaidEditor/src`)

MermaidEditor.js – the React component. It extracts the source from the stored envelope, shows a debounced live preview, and on every change commits JSON.stringify({diagram: source}). When renderSvg is enabled it additionally registers the save hook on the commit.
manifest.js – registers the editor in the inspector/editors registry and the save hook (Wwwision.Neos.MermaidEditor/RenderSvg) in the inspector/saveHooks registry.
mermaidRenderer.js – shared Mermaid instance/initialisation, renderSvg() and extractSource() helpers used by both the preview and the save hook.

Save hook

Neos UI save hooks run only when the editor change is applied (not on every keystroke). On Apply the hook renders the source to SVG and returns the {diagram, svg} envelope. Mermaid rendering is asynchronous; the hook returns a Promise, which Neos awaits. Errors are caught and the hook falls back to a source-only envelope — a throwing save hook would abort the entire save.

Frontend rendering

The Wwwision.Neos.MermaidEditor:Diagram Fusion component (Resources/Private/Fusion/Root.fusion) decides per state (see the table above). For the source-only case it emits a <pre class="mermaid" data-mermaid-source="..."> (the source is passed via an attribute so it is reliably HTML-escaped) plus the loader script.

Resources/Public/MermaidDiagram.js:

loads Mermaid on demand (ES module from the jsDelivr CDN),
moves each diagram's source from data-mermaid-source into the element text and renders it,
installs a MutationObserver so diagrams injected later are rendered too. This is required in the Neos backend: reloadIfChanged re-renders the node out-of-band (via AJAX), and the injected markup's own <script> does not execute — the observer (installed on the initial page load) catches the new element and renders it.

Development

The editor plugin is built with esbuild from Resources/Private/Scripts/MermaidEditor into Resources/Public/MermaidEditor.

Outputs:

Resources/Public/MermaidEditor/Plugin.js
Resources/Public/MermaidEditor/Plugin.css

After building, you may need to flush Neos caches (and reload the Neos UI) for the changes to appear.

Notes & caveats

CDN dependency. Client-side rendering (the editor preview always; the frontend only when renderSvg is disabled) loads Mermaid from https://cdn.jsdelivr.net/npm/mermaid@11/.... With renderSvg enabled, the public frontend serves the stored SVG and does not depend on the CDN. To self-host, place a copy of mermaid.esm.min.mjs under Resources/Public/ and adjust the import URLs in Resources/Public/MermaidDiagram.js and the editor sources.
SVG security. Stored SVG is emitted unescaped on the frontend. Mermaid's securityLevel: 'strict' sanitises at render time, but the SVG is produced during the authoring session.
Bundle size. The editor plugin bundles Mermaid and is therefore large (~7 MB). This only affects the backend editor, not the public frontend.

Contribution

Contributions in the form of issues or pull requests are highly appreciated

License

See LICENSE

All versions of neos-mermaideditor with dependencies

PHP Build Version

Package Version

Version 1.1.0 Release 19. Jun 2026
create-project require 0 people chose require and
0 people chose create-project.

Download

Download latest version of neos-mermaideditor from vendor wwwision

Requires neos/neos-ui Version ^8 || ^9

Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package wwwision/neos-mermaideditor contains the following files

Loading the files please wait ...