Diagram output not as expected.

[JustGitting]

Hi,

I tried to use dbml-renderer on a dbml file I had created, but the diagram only had the table names. So I tried to render the simple dbml example in the README file to make sure it was working. However, the example is not being rendered correctly either.

Table users {
    id integer
    username varchar
    role varchar
    created_at timestamp
}

Table posts {
    id integer [primary key]
    title varchar
    body text [note: 'Content of the post']
    user_id integer
    created_at timestamp
}

Ref: posts.user_id > users.id

$ dbml-renderer -i test.dbml -o test.svg

That produces:

Nothing like the example at https://github.com/softwaretechnik-berlin/dbml-renderer/blob/master/examples/user-posts.dbml.svg

There were no error messages or warnings when executing the dbml-renderer command. Is there a way to turn on logging/debugging? The command doesn't seem to have a help page either.

Maybe there is a missing package?

System setup:

OS: GNU/Linux - Devuan

I installed recent versions of nodejs/npm via nvm.

$ nvm --version
0.38.0
$ npm --version
7.21.0
$ node --version
v16.8.0

dbml-renderer was installed by:

$ npm install -g @softwaretechnik/dbml-renderer

The installation went smoothly without errors/warnings.

Any guidance appreciated.

Cheers

[tinomerl]

Having the same problem over here. did you have any luck finding a solution?

[JustGitting]

Hi @tinomerl,

Sorry, I don't have a solution.
I'm hoping @lucastorri or @fleipold might be able to help :)

[spencer741]

Bump @JustGitting @tinomerl @lucastorri @fleipold

[fleipold]

@lucastorri I tried to render the example with version 1.0.13 first and everything was fine.

 $ npm  list -g | grep dbml-renderer
   @softwaretechnik/[email protected] -> /Users/leipold/development/psg/dbml-renderer

Then I installed the latest version which is 1.0.19. It already gave me a warning when I installed it:

$ npm install -g dbml-renderer
/usr/local/bin/dbml-renderer -> /usr/local/lib/node_modules/@softwaretechnik/dbml-renderer/lib/index.js
npm WARN @softwaretechnik/[email protected] had bundled packages that do not match the required version(s). They have been replaced with non-bundled versions.

+ @softwaretechnik/[email protected]
updated 2 packages in 5.838s

I also noticed that if you produce a dot file and render that through graphviz's dot it is fine. If I produce the SVG directly I get the same error that the users are reporting here.

So my theory is that the dependency to the js dot renderer is broken.

A workaround for now could be to install version 1.0.13.

I have added a test case (the expected svg is rendered with 1.0.13 - which probably needs updating once it works properly).

[fleipold]

Oh, just noticing that the test suite doesn't check the SVG output, which is also broken for the other examples.

[lakay]

Downgrading from 1.0.19 to 1.0.13 doesn't solve the problem for me.
Even a uninstall and reinstall didn't change the rendering behaviour.

Still only Table Names and References are rendered in the SVG.

npm list -g | grep dbml-renderer
├── @softwaretechnik/[email protected]

Do I need to do additional removals or reinstallations?

[tinomerl]

@fleipold Thanks for the update. I tried replicating it today by first creating a dot file with the command:

dbml-renderer -i users.dbml -o users.dot

I used this example file. But the .dot output looks different from your example. The columns are clearly missing. When i try to create a svg file with:

dot -Tsvg users.dot -o output.svg.

I get the error "Error: users.dot: syntax error in line 1 near '>'". I also tried downgrading to 1.10.13 but got the same results as @lakay

[fleipold]

Thanks, @tinomerl .

This is really weird. I think it might be a problem of the graphviz version. I discovered that my local version is very "stable":

$ dot -V
dot - graphviz version 2.40.1 (20161225.0304)

It still manages to render that file.

So I'll upgrade and investigate. My suspicion is that the generated .dot file is a bit too liberal in its interpretation of the spec.

[fleipold]

It looks like this could be causing the problem: aduh95/viz.js#21

[Tutadit]

@tinomerl You need to specify the format output as 'dot':

dbml-renderer -i example.dbml -o output.dot -f dot

Then dot should be able to convert that into an svg for you.

[fleipold]

@lucastorri perhaps we should move away from viz.js. We could just exec the dot binary. It's available on most platforms.

[tinomerl]

@Tutadit thanks for the hint. with the -f flag it worked like a charm.

@fleipold maybe the flag could be added to the Readme/docs for new users?

[fbartho]

I'm exhibiting this issue with the SVG renderer.

I'm weirdly not exhibiting this issue when my DBML file is copied into a checkout of this repo (either at master or v1.0.19), but I am exhibiting this issue when I run the renderer via npx or when it's added as a package.json dependency in my project. -- Similarly, when I copy one of the examples into my repo and try to render that, I get the same broken behavior.

If it matters, my local dot version is:

dot - graphviz version 2.49.3 (20211023.0002)

I haven't yet tried the proposal of executing the dot binary myself.

[fbartho]

Update: executing the dot-binary myself works fine.

Separately: when I try to yarn install then we get some conflicts in typescript, so I'm wondering if this is something to do with package-version conflicts that work fine when using npm, but get upgraded to incompatible versions when using yarn?

in renderer.ts:

-           const ref: string = column.settings["ref"];
+           const ref: string = (
+             column?.settings as unknown as Record<string, string>
+           )?.["ref"] as string;

That doesn't explain why using npx doesn't produce a working renderer :( --since that should have isolated the binary from any versions in my own projects.

[fmancardi]

my 5 cents.
I'm working on Windows 10 and GraphViz was not installed.
Running this command:
dbml-renderer -i schema.dbml -o output.svg
I've got no error message but the svg file was wrong (same issues described by original issue reporter)

I've installed GraphViz, rerun the command, but result still was KO.
I've followed @fbartho approach and everything was OK!!!, using this command:
dbml-renderer -i schema.dbml -f dot | dot -Tsvg -o schema.svg

[dominik7680]

In case if anyone is using the library with Github actions:

runs-on: ubuntu-latest

      - name: Install graphViz
        run: sudo apt install graphviz

      - name: Render diagram
        run: dbml-renderer -i docs/database.dbml -f dot | dot -Tsvg -o docs/database.dbml.svg

[DigitalFeonix]

For a workaround I have done this in my package.json

{
  "devDependencies": {
    "@aduh95/viz.js": "3.4.0",
    "@dbml/cli": "^2.3.1",
    "@softwaretechnik/dbml-renderer": "^1.0.19"
  }
}

[barnardb]

The aduh95/viz.js#21 issue @fleipold pointed out, which was introduced in v3.5.0, is still present in the latest v3.6.0.

We've fixed this in v1.0.20 of dbml-renderer by pinning to aduh95/viz.js v3.4.0 for now.