Support CLI to export in png/svg format

[ThePlenkov]

Description

Hi!

I see that it's possible currently to export images from UI as png or svg. This is very convenient but manual feature now. TO be able to build automations and for example compile images from DSL files as project artifacts it would be nice if CLI could have this feature too.

I see that currently this feature is implemented in the frontend.

How about decoupling it from UI to a standalone module and let's say make it available as a standalone package or part of this CLI at least? I see that jsdom now supports canvas so theoretically is possible to build diagrams now using nodeJS.

I have found also https://github.com/extenda/structurizr-to-png project, but unfortunately the way it generates images is not even close to what we see in UI currently

Priority

Low

Resolution

I have no budget, please add this feature for free

More information

No response

[ThePlenkov]

@simonbrowndotje Hi! I think this topic has indeed several subtopics. Indeed decoupling is one thing. But even besides that. I'd like to ask - I found this project https://github.com/structurizr/puppeteer giving the idea how this images could be fetched.

I'd like to bring here several ideas:

• It is challenging in general to track for download progress in puppeteer. We can see a lot of discussions about that topic: Question: How do I get puppeteer to download a file? puppeteer/puppeteer#299
• From the other side I thought - since we're in NodeJS - it's not a big issue to download content by our own. And even more in case of svg/png we don't probably need that - because I see that images are already stored in #exportedDiagrams element.
• However we still have same problem with tracking the progreess. What should we await for? Since this functionality is tightly coupled with UI ( basically part of UI ) what I propose, instead of writing such a logic in custom nodeJS puppeteer code what if we think of better API in the browser page
• I have found at least function exportAllViews() which indeed makes what I want - builds all images and attaches to the page
• In the browser we can get those elements with #exportedDiagrams a selector and get their href, download and src to get URL, filename and even content.
• However in puppeteer it doesn't work by some reason and moreover we still have a problem - how to wait for the moment when all diagrams are processed
• That's why I have thought of one more async function which we can just await and that function can return us a promise resolved with all the requested diagrams, their filenames and even probably content.

Something like this could work

const images = await page.waitForFunction(() => async {
            return await exportAllVIewsAsync();
        });

in this case we'll just have very minimalistic logic in NodeJS/Puppeter and the rest of the logic will be delegated to UI.

Meanwhile, decoupling it entirely to JSDOM/SSR would be a better option probably but I understand that it's hardly doable now.

[simonbrowndotje]

in this case we'll just have very minimalistic logic in NodeJS/Puppeter and the rest of the logic will be delegated to UI.

The diagram rendering code is open source, so you're welcome to submit a PR that adds this capability. There's a lot of async/callback code to deal with loading themes and icons, so if you do add this feature, please be sure to check that it works with themes and icons. Thank you!

[ThePlenkov]

Sure! Meanwhile I've found an alternative solution https://likec4.dev/ which has this feature by default in their CLI. Unfortunately that cli also uses puppeteer - but that's fine - at least I was able to build set of images from one text file