Skip to content
Meltemi docs

Ask the docs

Ask a question in your own words: the answer is written from the portal's pages only, and names the pages it used.

0 of 500 characters

Your question is sent to Cloudflare Workers AI to be answered and is not stored. Answers can be wrong: check the sources. Privacy notice

Answers run on Cloudflare's free allowance, about four hundred a day for everyone.

Español

Meltemi Diagrams 1.0

Draft announcement for the 1.0 release. The owner adjusts it, adds the links of the published packages, the extension and the hosted web app, and publishes it with the release.

Meltemi Diagrams 1.0 is out: professional diagrams written as code, adjusted on a canvas, animated, and exported for documents, slides, the web and video. It is open source under the MIT licence, runs on your machine, and needs no account.

Editing a diagram: code and canvas side by side

Why

Section titled “Why”

Diagrams as code are reviewable and reusable, but their layout is out of your hands. Visual editors give you the picture you want, but the file behind it is opaque, and a change to the system means redrawing by hand. Meltemi Diagrams keeps both: the text file is the source, the canvas edits it, and every gesture is a small change you can read in a diff.

What is in 1.0

Section titled “What is in 1.0”
  • Four profiles in one language: flow diagrams, sequence diagrams with scenarios, C4 views of a shared model, and free compositions for slides (gallery).
  • Code and canvas: an extension for VS Code and a web app with the same canvas: grid, guides, routing, an inspector, and every change written back to the text.
  • Motion: effects along connectors and stories with scenes, camera and transitions, played in an offline HTML player or exported as MP4, WebM and GIF.
  • Delivery: SVG with embedded fonts, PNG, vector PDF with selectable text and links, and a browsable catalog of a whole project in one file.
  • Coming from elsewhere: Mermaid and PlantUML importers that report every construct, and guides for people coming from Mermaid, PlantUML or a visual editor.
  • Checked: every acceptance criterion passes on the reference machine, every export opens in Edge, Chrome and Firefox, and a conformance suite fixes what files mean (quality).

See it

Section titled “See it”
  • The purchase example: one purchase drawn as a C4 model with two views, a payment sequence, an executive slide and an animated story, with its video and catalog.
  • The editing demo: code typed, boxes dragged, a route and a label changed, and the code following every step.

Get it

Section titled “Get it”
Terminal window
npm install --global @meltemi/diagrams-cli
Terminal window
meltemi-diagrams init my-diagrams --template purchase

Then install the Meltemi Diagrams extension for VS Code, or open the web app at diagrams.meltemi.dev. The getting started guide takes about ten minutes. What runs where, and what 1.0 does not do, is in compatibility.

What comes next

Section titled “What comes next”

After the release, work goes first to defects and to what people need to use it again for their next delivery, before new notations. Realtime collaboration has since arrived, with the optional hosted web app (working together); proposals for new diagram types and for more managed services will be weighed against evidence of demand and the cost of supporting them.