[RFE] Enabling installation of extensions for PlantUML

[claudio-salvio]

Hello

Is your feature request related to a problem? Please describe I need support for using PlantUML on notebooks. Nowadays, diagrams as code are a must-have tool for all kinds of knowledge workers.

Please describe the solution or feature you'd like. Please enable the installation of extensions related to PlantUML, at least: PlantUML Code Extension

Describe alternatives you've considered Use another notebook editor that supports PlantUML.

Additional context For more examples of diagrams that can be created using PlantUML see: Real World PlantUML

It seems to me that this would be a very useful addition for many ADS users.

Best regards, Claudio Salvio

[VasuBhog]

@claudio-salvio I see that PlantUML requires downloading it via the online website to utilize it within other notebook editors. If this does not work with ADS Notebooks right out, I would suggest looking into https://github.com/jbn/IPlantUML - which is a python package for PlantUML that you should be able to utilize in our python notebooks in ADS.

[claudio-salvio]

Hello @VasuBhog

Thanks for joining the conversation!

I see that PlantUML requires downloading it via the online website to utilize it within other notebook editors.

I don't understand what you mean by this sentence.

Specifically, installing the mentioned extension would add the necessary elements for ADS to work with PlantUML as VSCode does. In other words, we could preview PlantUML diagrams, export them, sintax highlight, etc. Once installed, the extension can work using the plantuml.jar available on the local host without internet connection.

I don't know if you are aware but GitHub also supports them embedded in markdown.

Below, I add an illustrative example:

@startmindmap PlantUML, Mindmap Diagram, shape color background change using darken & lighten, based on explicitly defined color

skinparam defaultTextAlignment center
title <size:20>PlantUML, Mindmap Diagram, shape color background change using darken & lighten, based on explicitly defined color.</size>
''header <size:18>My header</size>
footer <size:16>Date Created: %date( "yyyy.MM.dd' 'HH:mm" ) - PlantUml Version: %version()</size>

!$mindmapDiagramBaseBackgroundColor = "lightgray"
!$mindmapDiagramBaseLineColor = "darkblue"

<style>
TitleFontSize 18
mindmapDiagram {
    BackGroundColor transparent

    :depth(0) {
        BackgroundColor lightblue
        HorizontalAlignment center
        LineColor %lighten( $mindmapDiagramBaseLineColor, 90)
        LineThickness 3.0
        RoundCorner 10
        Shadowing 0.0
    }

    :depth(1) {
        BackgroundColor %lighten( $mindmapDiagramBaseBackgroundColor, 10)
        HorizontalAlignment center
        LineColor %lighten( $mindmapDiagramBaseLineColor, 60)
        LineThickness 2.5
        Margin 5
        MaximumWidth 50
        Padding 10
        RoundCorner 10
    }

    :depth(2) {
        BackgroundColor %lighten( $mindmapDiagramBaseBackgroundColor, 5)
        HorizontalAlignment center
        LineColor %lighten( $mindmapDiagramBaseLineColor, 30)
        LineThickness 2.0
        MaximumWidth 50
        Padding 5
        RoundCorner 10
    }
    :depth(3) {
        BackgroundColor $mindmapDiagramBaseBackgroundColor
        HorizontalAlignment center
        LineColor $mindmapDiagramBaseLineColor
        LineThickness 2.0
        MaximumWidth 50
        Padding 3
        RoundCorner 10
    }
    :depth(4) {
        BackgroundColor %darken( $mindmapDiagramBaseBackgroundColor, 5)
        HorizontalAlignment center
        LineColor %darken( $mindmapDiagramBaseLineColor, 30)
        LineThickness 1.5
        MaximumWidth 50
        Padding 3
        RoundCorner 10
    }
    :depth(5) {
        BackgroundColor %darken( $mindmapDiagramBaseBackgroundColor, 10)
        HorizontalAlignment left
        LineColor %darken( $mindmapDiagramBaseLineColor, 60)
        LineColor darkgray
        LineThickness 1.5
        MaximumWidth 50
        RoundCorner 10
    }
}
</style>

+ <b>Deep 1</b>
** Deep 2
*** Deep 3
**** Deep 4
left
** Deep 2
*** Deep 3
**** Deep 4

@endmindmap

Here the image (SVG) if you export it:

It is pertinent to note that there are extensions for Browsers (e.g. Markdown Diagrams) that allow you to toggle between viewing the PlantUML code and the rendered diagram. In case of using one of them it is not necessary to include the image to have a view of the diagram.

Please let me know if you would change anything in your previous answer based on this comment.

Best regards, Claudio Salvio