structurizr / puppeteer Goto Github PK

I’ve cloned the repo, and I’m running the script like so: $ node export-express-diagram.js png /path/to/valid/diagram.yaml

The script almost immediately prints out an error message, then hangs.

The error:

TypeError: Cannot read property 'replace' of undefined
    at exportDiagramAndKeyToPNG (/Users/avi.flax/dev/floss/structurizr/puppeteer/export-express-diagram.js:51:54)
    at process._tickCallback (internal/process/next_tick.js:68:7)

(I’ve omitted the output related to a UnhandledPromiseRejectionWarning and DeprecationWarning.)

My environment:

• Puppeteer 1.10.0
• Node 10.13.0
• MacOS 10.13.6

Thanks!

I am seeing the following error when I tried to use
export-private-diagrams-to-html.js

On either the on premises or the cloud version.

node export-private-diagrams-to-html.js http://localhost:9191/ structurizr password 1

Signing in...

/Users/sacchitp/git-all-repo/git-pub/puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:528

        const timeoutError = new Errors_js_1.TimeoutError(`waiting for ${options.title} failed: timeout ${options.timeout}ms exceeded`);

                             ^

TimeoutError: waiting for selector div.dashboardMetaData failed: timeout 30000ms exceeded

at new WaitTask (/Users/sacchitp/git-all-repo/git-pub/puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:528:34)

at DOMWorld.waitForSelectorInPage (/Users/sacchitp/git-all-repo/git-pub/puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:432:26)

at Object.internalHandler.waitFor (/Users/sacchitp/git-all-repo/git-pub/puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/QueryHandler.js:31:77)

at DOMWorld.waitForSelector (/Users/sacchitp/git-all-repo/git-pub/puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:323:29)

at Frame.waitForSelector (/Users/sacchitp/git-all-repo/git-pub/puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/FrameManager.js:942:51)

at Page.waitForSelector (/Users/sacchitp/git-all-repo/git-pub/puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/Page.js:2359:33)

at /Users/sacchitp/git-all-repo/git-pub/puppeteer/export-private-diagrams-to-html.js:32:14

at processTicksAndRejections (node:internal/process/task_queues:96:5)

It looks like this stopped working - the Structurizr JS API functions are only available on the individual Diagram pages, but the script tries to access the API from the diagrams overview page. I get a timeout here:

await page.waitForFunction('structurizr.scripting.isDiagramRendered() === true');

Description

We are conducting an experiment with Structurizr at GitLab to model our different architectures. Recently, we discovered that the diagrams we were exporting using this repo were inconsistent. Some diagrams are replaced by others in the export, leading to unpredictability and duplicates.

I could reproduce with a simple example, so it doesn't seem to be related to our code.

Steps to reproduce

1. curl -o https://raw.githubusercontent.com/structurizr/dsl/a97141682dffd8b5104cedd7155e1a87be2d5fb6/src/test/dsl/big-bank-plc.dsl
2. docker run -it --rm -p 8080:8080 -v $PWD:/usr/local/structurizr -e STRUCTURIZR_WORKSPACE_PATH=. -d structurizr/lite
3. until curl -f -s -o /dev/null http://localhost:8080; do echo -n "."; sleep 1; done
4. node export-diagrams.js http://localhost:8080/workspace/diagrams png

Screenshot

Components.png:

Containers.png:

(Same files)

Everything seems scrambled. System Landscapes replace Components view, some others appear multiple times.

Code sample

See https://gitlab.com/gitlab-com/gl-security/security-architecture/gitlab-architecture/-/blob/main/scripts/export-workspaces.sh?ref_type=heads

Configuration

Structurizr Lite
 - build: 3216 (2023-11-09T07:28:05Z)
 - structurizr-java: v1.27.0
 - structurizr-dsl: v1.33.0
 - structurizr-import: v1.6.0
 - structurizr-graphviz: v2.2.2

(From package.json:)
"puppeteer": "^20.9.0"
(same result with 21.5.1).

Severity

Major

Priority

I have no budget and there's no rush, please fix this for free

More information

No response

Thanks for creating this repo! It’s super helpful.

One minor problem: the readme doesn’t say how to download the dependencies, and one can’t just run npm install (which AFAIK is the usual way to install the deps of a node program) because package.json isn’t included in the repo.

So maybe it should be included?

Alternatively, I figured out that I can just run npm install puppeteer and that works just fine. So another option might be to remove package-lock.json and add some instructions to the README that users should simply run npm install puppeteer? I’d be happy to contribute such a change as a pull request if you’d like.

HI Appreciate this is an old repo. I hope someone can provide a little help. I have some diagrams manually laid out and some using auto-layout. It seems the manual ones looses the formatting and everything is bunched up in the top left corner but the auto layout ones seem ok. Any ideas?

It would be great if it supports Structurizr Lite in a way I can get PNG images from a workspace loaded in Structurizr Lite running locally

If a diagram contains a large number of elements / relantionships, function structurizr.scripting.changeView opens a popup like this:

Then the process is stuck and cannot finish.

Tested with script for Structurizr Lite, but probably impacted also in others.

Error

(node:45228) UnhandledPromiseRejectionWarning: TimeoutError: waiting for selector `div.dashboardMetaData` failed: timeout 30000ms exceeded
    at new WaitTask (C:\Users\arthur.santiago\Documents\Supply\DOC\puppeteer\node_modules\puppeteer\lib\cjs\puppeteer\common\DOMWorld.js:509:34)
    at DOMWorld.waitForSelectorInPage (C:\Users\arthur.santiago\Documents\Supply\DOC\puppeteer\node_modules\puppeteer\lib\cjs\puppeteer\common\DOMWorld.js:420:26)
    at Object.internalHandler.waitFor (C:\Users\arthur.santiago\Documents\Supply\DOC\puppeteer\node_modules\puppeteer\lib\cjs\puppeteer\common\QueryHandler.js:31:77)
    at DOMWorld.waitForSelector (C:\Users\arthur.santiago\Documents\Supply\DOC\puppeteer\node_modules\puppeteer\lib\cjs\puppeteer\common\DOMWorld.js:313:29)
    at Frame.waitForSelector (C:\Users\arthur.santiago\Documents\Supply\DOC\puppeteer\node_modules\puppeteer\lib\cjs\puppeteer\common\FrameManager.js:841:51)
    at Page.waitForSelector (C:\Users\arthur.santiago\Documents\Supply\DOC\puppeteer\node_modules\puppeteer\lib\cjs\puppeteer\common\Page.js:2238:33)
    at C:\Users\arthur.santiago\Documents\Supply\DOC\puppeteer\export-private-diagrams.js:47:14
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:45228) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block,
 or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=
strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:45228) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.
js process with a non-zero exit code.

How difficult would it be to make this script export a clickable SVG?

https://github.com/structurizr/puppeteer/blob/master/export-diagrams-lite.js#L8

I added a link to a box to a generated SVG, which works when opening it with Google Chrome.

https://www.w3.org/wiki/SVG_Links

If you can point me to structurizr.scripting.exportCurrentDiagramToSVG I can try to edit it. I'm not seeing that functin any repos in this repo's organization.

I am getting the following errors.
Signing in...
/Users/user1/git-all-repo/pluto-git/C4-Puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:528
const timeoutError = new Errors_js_1.TimeoutError(waiting for ${options.title} failed: timeout ${options.timeout}ms exceeded);
^

TimeoutError: waiting for selector div.dashboardMetaData failed: timeout 30000ms exceeded
at new WaitTask (/Users/user1/git-all-repo/pluto-git/C4-Puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:528:34)
at DOMWorld.waitForSelectorInPage (/Users/user1/git-all-repo/pluto-git/C4-Puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:432:26)
at internalHandler.waitFor (/Users/user1/git-all-repo/pluto-git/C4-Puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/QueryHandler.js:31:77)
at DOMWorld.waitForSelector (/Users/user1/git-all-repo/pluto-git/C4-Puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:323:29)
at Frame.waitForSelector (/Users/user1/git-all-repo/pluto-git/C4-Puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/FrameManager.js:942:51)
at Page.waitForSelector (/Users/user1/git-all-repo/pluto-git/C4-Puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/common/Page.js:2370:33)
at /Users/user1/git-all-repo/pluto-git/C4-Puppeteer/export-private-diagrams-to-html.js:38:14
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v18.5.0