Celeris

SysMLv2 Mermaid Viewer — a VS Code extension that renders the contents of a SysML v2 package as a Mermaid diagram. Put your cursor inside a package in a .sysml file, right-click, and pick a diagram type — the package is shown in a webview panel, with irrelevant elements filtered out. Several diagrams can be open at once (one per panel).

Diagram types: flowchart, class, state, sequence, requirement, interconnection and realization (all implemented). See examples/ for a sample model per type.

The class diagram doubles as a SysML Block Definition Diagram (BDD), so it also renders breakdown structures — function (action def) and component (part def) decomposition trees via composition. See examples/breakdown/.

The interconnection diagram is the SysML Internal Block Diagram (IBD): it wires the inside of a block — parts through their ports (connect / interface) and functions through their in/out parameters (item flow). See examples/interconnection/.

The realization diagram shows cross-level traceability: elements are placed in engineering-level lanes (Arcadia/NAF — Operational → System → Logical → Physical, from each element's conformed profile type) with realization dependency links drawn between levels. See examples/realization/.

Tabular views — display elements as a table (right-click → Celeris → Show Table…), with CSV export. Built-in presets cover requirements, interfaces (each connection with its ports, parts and the item flows that traverse it) and elements (any type). Define your own — a row select + columns — in a .table.json pointed to by celeris.tableConfig. See examples/tables/.

Gantt (schedule) view — turn an activity sequence into a Gantt (right-click → Celeris → Show Gantt Diagram): actions are tasks, successions are dependencies, and planning attributes set each bar — attribute duration = <days>; (length) and attribute resource = "<name>"; (colour, one section per resource). The critical path is outlined in red. See examples/gantt/.

How it works

Parsing reuses the open-source SysML v2 parser syside-languageserver (Langium, EPL-2.0 / GPL-2.0 with Classpath exception) in-process for a full semantic AST. The installed Syside Editor still provides editor linting; this extension uses the open-source parser only to build diagrams.
Extraction walks the package AST into a small diagram IR (src/diagrams/ir.ts), keeping only relevant elements (e.g. for flowcharts: actions, decisions, forks/joins and successions/transitions).
Rendering turns the IR into Mermaid text and shows it in a webview that loads a bundled, offline copy of Mermaid.

.sysml ──▶ parseText ──▶ findEnclosingPackage ──▶ extractFlow ──▶ flowToMermaid ──▶ webview
          (parser.ts)     (packageAtCursor.ts)    (flowchart/)     (flowchart/)      (panel.ts)

Project layout

Path	Purpose
`src/extension.ts`	Activation + command handler
`src/sysml/parser.ts`	In-process SysML parsing (anti-corruption boundary)
`src/sysml/packageAtCursor.ts`	Cursor offset → enclosing package
`src/diagrams/ir.ts`	Diagram intermediate representation
`src/diagrams/flowchart/extract.ts`	Package AST → flow IR
`src/diagrams/flowchart/mermaid.ts`	Flow IR → Mermaid text
`src/webview/panel.ts`	Webview panel + Mermaid rendering
`scripts/*.mjs`	Headless checks (parser, render, cursor)
`examples/coffee.sysml`	Sample model

Development setup

Node.js (installed: v24 LTS) and the build toolchain:
```
npm install
```
The SysML parser is built at build time from a sibling clone of sensmetry/sysml-2ls, expected at ../_sysml-2ls-src. It is bundled into dist/extension.js by esbuild, so the runtime artifact is self-contained. To (re)create it:
```
git -c http.sslBackend=schannel clone --depth 1 \
  https://github.com/sensmetry/sysml-2ls ../_sysml-2ls-src
cd ../_sysml-2ls-src && pnpm install --filter "syside-languageserver..."
```
Override the location with the SYSIDE_DIR environment variable.

Build / test:

npm run build          # bundle the extension + copy Mermaid into media/
npm test                          # unit + integration tests
npm run check-parser              # parse a sample with the bundled parser
node scripts/render.mjs class examples/vehicle.sysml   # parse → extract → Mermaid
node scripts/verify-examples.mjs  # parse + render every example

Try it

Press F5 (Run Extension). In the new window, open any file from examples/, put the cursor inside its package, right-click → Celeris → Show … Diagram (Flowchart / Class / State / Sequence). Each command opens its own panel, so you can show several diagrams side by side.

Each panel has a toolbar: ⟳ Refresh redraws from the current source, ⤓ PNG exports the diagram, and zoom/pan controls — −, 1:1 (actual size), +, ⤢ Fit (auto-fit to the window). You can also zoom with the mouse wheel (toward the cursor), drag to pan, and use the keys + / - / 0 (1:1) / f (fit).

Two view toggles — Defs and Inherited — declutter the class and requirement diagrams: Defs hides the definition boxes, Inherited hides the inheritance edges and the (usually imported) supertypes they point to. Each toggle is per-panel and persists across refreshes.

Settings

celeris.flowchart.direction — TB | LR | BT | RL
celeris.theme — Mermaid theme (default, dark, forest, neutral)
celeris.autoRefreshOnSave — redraw open diagrams when their .sysml file is saved (default: true). Each panel also has a ⟳ Refresh button for an on-demand update.
celeris.styleFile — path to a JSON style file (see below).

Styling elements by SysML type

You can colour diagram elements by their native SysML type (PartUsage, ActionDefinition, …) and/or by the SysML type they conform to (typing or specialization, followed through the hierarchy). Point celeris.styleFile at a JSON file:

{
  "name": "Arcadia",
  "rules": [
    { "type": "LogicalComponent", "style": { "fill": "#bdd7ee", "stroke": "#2e75b6" } },
    { "type": "PhysicalNode",      "style": { "fill": "#ffe699", "stroke": "#bf9000" } },
    { "nativeType": "ActionUsage", "style": { "fill": "#c6e0b4", "stroke": "#548235" } }
  ]
}

Two ways to activate a style file:

Command (recommended, most reliable): run Celeris: Select Style File… from the Command Palette and pick the JSON. The absolute path is remembered globally (independent of workspace/settings) and open diagrams refresh immediately. Celeris: Clear Style File removes it.
Setting: celeris.styleFile (absolute, or relative to the workspace folder / the .sysml file).

Run Celeris: Show Log (Output → "Celeris") to see which style file was loaded and how many style directives were emitted — handy if colours don't appear.

Each rule selects by nativeType and/or type (string or array). When both are given they must both match. Rules are tried in order; the first match wins.
type matches the whole type hierarchy, so part def Radio :> LogicalComponent is coloured as a LogicalComponent, and so is part comms : Radio.
Styling applies to flowchart, class and state diagrams (via Mermaid classDef); sequence participants are coloured via Mermaid box.

Ready-made methodology profiles (reusable stereotype library + colour code + sample model):

Arcadia — examples/arcadia/ (functions green, logical blue, physical yellow, operational orange).
NAF v4 — examples/naf/ (colour by grid layer: Concepts purple, Service blue, Logical green, Physical orange).

Flowchart colour code & performers

Flowcharts carry a built-in colour code by node kind, applied even with no style file (a style file overrides it): actions blue, control nodes (decision / fork / join) amber, events (accept / send) purple, and performer parts green. When a part performs an action, it is shown as a green component linked to that action by a dashed performed by (allocation) edge — so a flowchart also shows which component realises each function. A legend recalls the code.

Functional chains (Capella-style)

Highlight functional chains in flowcharts. Model each chain the SysML v2 way — as a use case that performs the functions it traverses (with part performers that realise them); the flowchart then draws each chain's functions and flows with a bold coloured border, marks functions shared by several chains with a dark border, and adds a legend. See examples/chains/.

Manual

A PDF user manual (features, changelog, and every example with its syntax-highlighted SysML, the generated diagram, and a short explanation) is in manual/Celeris-Manual.pdf. Regenerate it with npm run manual (renders via headless Edge/Chrome).

License

This extension's own code is licensed under the MIT License — see LICENSE.

The distributed extension bundles third-party open-source components, each under its own license: the SysML v2 parser syside-languageserver (and siblings) under EPL-2.0 / GPL-2.0 with Classpath exception, Mermaid and most others under MIT, and chevrotain under Apache-2.0. Full license texts and attributions are in THIRD-PARTY-NOTICES.txt (regenerate with node scripts/gen-notices.mjs). The EPL-2.0 parser source is available, unmodified, at https://github.com/sensmetry/sysml-2ls.