PHPackages                             carbon/code2chart - 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. carbon/code2chart

ActiveNeos-carbon[Utility & Helpers](/categories/utility)

carbon/code2chart
=================

Convert code to chart

0.1.1(2mo ago)01GPL-3.0JavaScriptCI passing

Since Nov 22Pushed 2w ago1 watchersCompare

[ Source](https://github.com/CarbonPackages/Carbon.Code2Chart)[ Packagist](https://packagist.org/packages/carbon/code2chart)[ RSS](/packages/carbon-code2chart/feed)WikiDiscussions main Synced today

READMEChangelog (2)Dependencies (6)Versions (4)Used By (0)

Carbon.Code2Chart
=================

[](#carboncode2chart)

Convert JavaScript code snippets into visual flowcharts directly inside Neos.

This package provides a Neos content element that lets editors enter code in the inspector and renders a flowchart on the frontend. Optional syntax highlighting for the source code is included.

Features
--------

[](#features)

- Neos content element for code-to-flowchart rendering
- Uses js2flowchart for SVG flowchart generation
- Optional JavaScript syntax highlighting with highlight.js
- Configurable diagram root label
- Configurable max name length for flowchart nodes
- Optional source-code visibility
- Backend notifications for missing or invalid code

Requirements
------------

[](#requirements)

- Neos: `^8.4 || ^9.0`
- PHP package dependencies:
    - `carbon/notification` (`^2.4 || ^3.0`)
    - `carbon/fileloader` (`^0.1`)
- Frontend runtime dependencies:
    - `highlight.js` (`^11.11.1`)
    - `js2flowchart` (`^1.3.5`)
- Frontend toolchain:
    - `pnpm` `11.6.0`
    - `eslint` `^10.5.0`
    - `stylelint` `^17.13.0`
    - `postcss` `^8.5.15`
    - `cssnano` `^8.0.2`
    - `esbuild` `^0.28.1`

Installation
------------

[](#installation)

Install the package in your Neos distribution (for example via Composer path repository or VCS workflow):

```
composer require carbon/code2chart
```

Then install frontend dependencies in this package and build assets:

```
pnpm install
pnpm build
```

Usage In Neos
-------------

[](#usage-in-neos)

After installation, add the content element in the Neos backend:

- Node type: `Carbon.Code2Chart:Content.Item`

Inspector properties:

- `label`: Custom root label for the flowchart (fallback is `Program`)
- `maxNameLength`: Maximum text length for rendered node names
- `showCode`: Toggle whether source code is shown
- `code`: JavaScript source code to visualize

Item props (Fusion):

- `label`: Read from node property `label`; falls back to node property `title`
- `code`: Read from node property `code`
- `showCode`: Read from node property `showCode`
- `maxNameLength`: Read from node property `maxNameLength`
- `includeJS`: Whether to load `Main.js` via Carbon.FileLoader (default: `true`)
- `includeCSS`: Whether to load `Main.css` via Carbon.FileLoader (default: `true`)

The package auto-includes its Fusion and translation configuration.

Frontend Build And Development
------------------------------

[](#frontend-build-and-development)

Available scripts:

```
pnpm lint
pnpm css
pnpm js
pnpm build
pnpm start
```

What they do:

- `lint`: Runs ESLint for JS and Stylelint for PostCSS
- `css`: Compiles `Resources/Private/Fusion/Main.pcss` to `Resources/Public/Main.css`
- `js`: Bundles `Resources/Private/Fusion/Main.js` to `Resources/Public/Main.js`
- `build`: Runs CSS and JS builds
- `start`: Alias for `build`

Project Structure
-----------------

[](#project-structure)

- `Configuration/NodeTypes.Content.yaml`: Public content node type
- `Configuration/NodeTypes.Mixin.Item.yaml`: Inspector properties and UI config
- `Resources/Private/Fusion/Integration/Item.fusion`: Node integration
- `Resources/Private/Fusion/Presentation/FlowChart.fusion`: Render component
- `Resources/Private/Fusion/Main.js`: Flowchart + highlight runtime logic
- `Resources/Private/Fusion/Main.pcss`: Styling source
- `Resources/Public/Main.js`: Built JavaScript asset
- `Resources/Public/Main.css`: Built CSS asset

License
-------

[](#license)

GPL-3.0

###  Health Score

36

—

LowBetter than 79% of packages

Maintenance90

Actively maintained with recent releases

Popularity1

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity39

Early-stage or recently created project

 Bus Factor1

Top contributor holds 80% 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 ~1230 days

Total

2

Last Release

88d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/5fec51ac160a110a31a72a54ac29e276a447d8306205a052d35491ac9cf0589b?d=identicon)[jonnitto](/maintainers/jonnitto)

---

Top Contributors

[![jonnitto](https://avatars.githubusercontent.com/u/4510166?v=4)](https://github.com/jonnitto "jonnitto (12 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (3 commits)")

### Embed Badge

![Health badge](/badges/carbon-code2chart/health.svg)

```
[![Health](https://phpackages.com/badges/carbon-code2chart/health.svg)](https://phpackages.com/packages/carbon-code2chart)
```

###  Alternatives

[neos/seo

SEO configuration and tools for Neos

141.0M30](/packages/neos-seo)[sitegeist/kaleidoscope

Responsive-images for Neos

29370.3k11](/packages/sitegeist-kaleidoscope)[kaufmanndigital/gdpr-cookieconsent

A ready-to-run package, that integrates an advanced cookie consent banner into your Neos CMS site.

2542.4k](/packages/kaufmanndigital-gdpr-cookieconsent)[techdivision/ckstyles

Neos package which enables you adding your custom style classes for the CkEditor with a simple Yaml configuration

21179.5k](/packages/techdivision-ckstyles)[sitegeist/taxonomy

Manage vocabularies and taxonomies as separate node-hierarchy.

1595.1k1](/packages/sitegeist-taxonomy)[shel/neos-colorpicker

A plugin for Neos CMS which provides a colorpicker editor

14104.7k6](/packages/shel-neos-colorpicker)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)