backstage: 🐛 Bug Report: [TechDocs] PlantUML diagrams are not rendered
📜 Description
When adding a PlantUML diagram to TechDocs the build succeeds but the diagram is not rendering. Backstage just shows the alt text (“uml diagram”) and when opening the image in a new tab, it is empty: data:image/png;base64,.
👍 Expected behavior
I would expect the diagram to show up in the documenation.
👎 Actual Behavior with Screenshots
Just the alt text (“uml diagram”) of the diagram is displayed and when opening the image in a new tab, it is empty.
When right clicking the “uml diagram” and selecting “Open Image in New Tab”:
👟 Reproduction steps
Configure Backstage to locally render TechDocs (in our case they are also published to S3 but that shouldn’t matter):
techdocs:
builder: 'local'
generator:
runIn: 'local'
publisher:
type: 'awsS3'
awsS3:
bucketName: ${TECHDOCS_S3_BUCKET}
region: eu-central-1
credentials:
accessKeyId: ${TECHDOCS_S3_ACCESS_KEY}
secretAccessKey: ${TECHDOCS_S3_SECRET_KEY}
Install PlantUML in the container just as in techdocs-container/Dockerfile (see first comment for the full Dockerfile):
RUN pip install --upgrade pip && pip install mkdocs-techdocs-core
RUN curl -o plantuml.jar -L https://github.com/plantuml/plantuml/releases/download/v1.2023.10/plantuml-1.2023.10.jar && echo "527d28af080ae91a455e7023e1a726c7714dc98e plantuml.jar" | sha1sum -c - && mv plantuml.jar /opt/plantuml.jar
RUN echo '#!/bin/sh\n\njava -jar '/opt/plantuml.jar' ${@}' >> /usr/local/bin/plantuml
RUN chmod 755 /usr/local/bin/plantuml
Add a PlantUML diagram to the TechDocs:
Generated graph:
```plantuml
@startuml
title Login Sequence
ComponentA->ComponentB: Login Request
note right of ComponentB: ComponentB logs message
ComponentB->ComponentA: Login Response
@enduml
```
📃 Provide the context for the Bug.
We would like to use PlantUML diagrams in our TechDocs as it should be possible.
🖥️ Your Environment
OS: Linux 6.6.4-200.fc39.x86_64 - linux/x64
node: v18.17.1
yarn: 1.22.19
cli: 0.24.0 (installed)
backstage: 1.20.3
Dependencies:
@backstage/app-defaults 1.4.5
@backstage/backend-app-api 0.5.8
@backstage/backend-common 0.15.2, 0.19.9
@backstage/backend-dev-utils 0.1.2
@backstage/backend-openapi-utils 0.1.0
@backstage/backend-plugin-api 0.6.7
@backstage/backend-tasks 0.5.12
@backstage/catalog-client 1.4.6
@backstage/catalog-model 1.4.3
@backstage/cli-common 0.1.13
@backstage/cli-node 0.2.0
@backstage/cli 0.24.0
@backstage/config-loader 1.5.3
@backstage/config 1.1.1
@backstage/core-app-api 1.11.1
@backstage/core-components 0.13.8
@backstage/core-plugin-api 1.8.0
@backstage/dev-utils 1.0.24
@backstage/errors 1.2.3
@backstage/eslint-plugin 0.1.3
@backstage/frontend-plugin-api 0.3.0
@backstage/integration-aws-node 0.1.8
@backstage/integration-react 1.1.21
@backstage/integration 1.7.2
@backstage/plugin-adr-backend 0.4.4
@backstage/plugin-adr-common 0.2.17
@backstage/plugin-adr 0.6.10
@backstage/plugin-api-docs 0.10.1
@backstage/plugin-app-backend 0.3.55
@backstage/plugin-app-node 0.1.7
@backstage/plugin-auth-backend-module-gcp-iap-provider 0.2.1
@backstage/plugin-auth-backend-module-github-provider 0.1.4
@backstage/plugin-auth-backend-module-gitlab-provider 0.1.4
@backstage/plugin-auth-backend-module-google-provider 0.1.4
@backstage/plugin-auth-backend-module-oauth2-provider 0.1.4
@backstage/plugin-auth-backend 0.20.0
@backstage/plugin-auth-node 0.4.1
@backstage/plugin-badges-backend 0.3.4
@backstage/plugin-badges 0.2.51
@backstage/plugin-catalog-backend-module-bitbucket-server 0.1.20
@backstage/plugin-catalog-backend-module-github 0.4.5
@backstage/plugin-catalog-backend-module-scaffolder-entity-model 0.1.4
@backstage/plugin-catalog-backend-module-unprocessed 0.3.4
@backstage/plugin-catalog-backend 1.15.0
@backstage/plugin-catalog-common 1.0.18
@backstage/plugin-catalog-graph 0.3.1
@backstage/plugin-catalog-import 0.10.3
@backstage/plugin-catalog-node 1.5.0
@backstage/plugin-catalog-react 1.9.1
@backstage/plugin-catalog-unprocessed-entities 0.1.5
@backstage/plugin-catalog 1.15.1
@backstage/plugin-entity-validation 0.1.12
@backstage/plugin-events-node 0.2.16
@backstage/plugin-github-actions 0.6.8
@backstage/plugin-home-react 0.1.5
@backstage/plugin-jenkins-backend 0.3.1
@backstage/plugin-jenkins-common 0.1.21
@backstage/plugin-jenkins 0.9.2
@backstage/plugin-org 0.6.17
@backstage/plugin-permission-backend 0.5.30
@backstage/plugin-permission-common 0.7.10
@backstage/plugin-permission-node 0.7.18
@backstage/plugin-permission-react 0.4.17
@backstage/plugin-proxy-backend 0.4.5
@backstage/plugin-scaffolder-backend 1.19.1
@backstage/plugin-scaffolder-common 1.4.3
@backstage/plugin-scaffolder-node 0.2.8
@backstage/plugin-scaffolder-react 1.6.1
@backstage/plugin-scaffolder 1.16.1
@backstage/plugin-search-backend-module-catalog 0.1.11
@backstage/plugin-search-backend-module-pg 0.5.16
@backstage/plugin-search-backend-module-stack-overflow-collator 0.1.0
@backstage/plugin-search-backend-module-techdocs 0.1.11
@backstage/plugin-search-backend-node 1.2.11
@backstage/plugin-search-backend 1.4.7
@backstage/plugin-search-common 1.2.8
@backstage/plugin-search-react 1.7.3
@backstage/plugin-search 1.4.3
@backstage/plugin-sonarqube-backend 0.2.9
@backstage/plugin-sonarqube-react 0.1.10
@backstage/plugin-sonarqube 0.7.9
@backstage/plugin-stack-overflow-backend 0.2.11
@backstage/plugin-stack-overflow 0.1.22
@backstage/plugin-tech-insights-backend-module-jsonfc 0.1.39
@backstage/plugin-tech-insights-backend 0.5.21
@backstage/plugin-tech-insights-common 0.2.12
@backstage/plugin-tech-insights-node 0.4.13
@backstage/plugin-tech-insights 0.3.19
@backstage/plugin-tech-radar 0.6.10
@backstage/plugin-techdocs-backend 1.9.0
@backstage/plugin-techdocs-module-addons-contrib 1.1.2
@backstage/plugin-techdocs-node 1.10.0
@backstage/plugin-techdocs-react 1.1.13
@backstage/plugin-techdocs 1.9.1
@backstage/plugin-user-settings 0.7.13
@backstage/release-manifests 0.0.11
@backstage/test-utils 1.4.5
@backstage/theme 0.4.4
@backstage/types 1.1.1
@backstage/version-bridge 1.0.7
Done in 0.40s.
Note: I’m willing to submit a PR but would need help on identifying the issue.
👀 Have you spent some time to check if this bug has been raised before?
- I checked and didn’t find similar issue
🏢 Have you read the Code of Conduct?
- I have read the Code of Conduct
Are you willing to submit PR?
Yes I am willing to submit a PR!
About this issue
- Original URL
- State: closed
- Created 6 months ago
- Comments: 22 (9 by maintainers)
Thank you! We’ll change it then 🙂 (We need to update to Node 20 anyways)
Closing as everything works now 😃
Thank you! 🙂 Oh, and happy new year 🍀 🎆
First of all: Thank you for all the time you have put into this issue - you really helped me a lot!! 🙏 🙂
I should definitely have noticed that 🤦♀️ Especially because they are installing it in the techdocs-container as well. Sorry for wasting your time with this stupid error.
OK, pretty sure I figured it out but not sure how I missed this or how I though it was working for me before. I’m also not sure why something didn’t throw an error about it.
But Java is missing! Once I installed that then in my Docker container it works:
Dockerfile:
Just a following up, got a test bed setup on Friday with the same state as you. Working on it today I think the issue is that you don’t have all the dependencies installed. Specifcally the items from this line:
https://github.com/backstage/techdocs-container/blob/cfa8832c0479935c2c53239257f7a607044c0100/Dockerfile#L17
Debian does come with Java but not graphviz, when I installed that the diagram generated. I’m less sure on the need of the others ones. Here’s what the install section looks like in my Dockerfile: