Plantuml Syntax error in procedure definition using asciidoc

[carolinabrasio]

When I import plantuml diagram from an asciidoc file is given me a syntax error in C4.plum specifically on HIDE_STEREOTYPE procedure creation. My plantuml diagram looks like this:

@startuml
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml

LAYOUT_TOP_DOWN()

(...)

@enduml

And I import it in asciidoc file like this:

["plantuml","containers",format="png"]
plantuml::./files/my-diagram.puml[]

The error is the following:

ERROR: my-file.adoc: line 6: Failed to generate image: PlantUML image generation failed: [From https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml (line 56) ]       
[From https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml (line 1) ]
[From https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml (line 1) ]
[From <input> (line 2) ]                                                                             

@startuml                                                                                            

...                                                                                                  
... ( skipping 21 lines )                                                                            
...                                                                                                  
    StereotypeFontSize 12                                                                            
    shadowing false                                                                                  
}                                                                                                    

skinparam Arrow {                                                                                    
    Color #666666                                                                                    
    FontColor #666666                                                                                
    FontSize 12                                                                                      
}                                                                                                    

skinparam rectangle<<boundary>> {                                                                    
    Shadowing false                                                                                  
    StereotypeFontSize 0                                                                             
    FontColor #444444                                                                                
    BorderColor #444444                                                                              
    BorderStyle dashed                                                                               
}                                                                                                    

!procedure HIDE_STEREOTYPE()                                                                         
^^^^^                                                                                                
 Syntax Error?

Versions: asciidoctor-maven-plugin --> 2.1.0 asciidoctorj --> 2.4.2 asciidoctorj-diagram --> 2.0.5

Regards Carolina

[adrianvlupu]

Hi, I think the issue is the PlantUML version asciidoc is using, not recognizing the procedure keyword. Try changing your file to

@startuml
version
@enduml

and see what it generates. It should be something like

If it's an older version (older than 1.2020.*), try using the https://github.com/plantuml-stdlib/C4-PlantUML/tree/release/1-0 branch

[joao-martins-tdx]

Hi,

I also have the same issue and my PlantUML version as of now is 1.2020.23:

[adrianvlupu]

I have no experience using asciidoc but I assume there is a plugin that actually handles plantuml files. Did you obtain that image after running asciidoc on a diagram file or did you just use your local copy of plantuml?

I suspect that internally, the asciidoc plugin uses a different version of plantuml.

For example, I found this asciidoc plugin: https://github.com/hsanson/asciidoctor-plantuml/blob/516a64660f779647bc577f832aaf99c1d3654268/lib/asciidoctor_plantuml/plantuml.rb#L11

module Asciidoctor
  # PlantUML Module
  module PlantUml
    # PlantUML Configuration
    class Configuration
      DEFAULT_URL = ENV['PLANTUML_URL'] || ''
      DEFAULT_ENCODING = ENV['PLANTUML_ENCODING'] || 'legacy'

From what I can tell it should use whatever server is set inside the environment variable PLANTUML_URL, maybe that is not the defaut http://www.plantuml.com/plantuml server. The master branch is compatible with the current online version of PlantUML.

[joao-martins-tdx]

AsciiDoc has indeed a plugin that handles PlantUML files and that plugin uses a different PlantUML version.

The image I posted above was generated by my local copy of PlantUML.

Meanwhile, the image produced by running AsciiDoc on a diagram file like the one suggested is:

Could the issue be related with PlantUML 1.2020.06?

[adrianvlupu]

In that case, until they update their version you can use my fork that has a branch compatible with that version. While testing it I corrected some bugs on it. It should have pretty much all the features of the latest branch here but internally uses function instead of procedure.

Tried this diagram with the plantuml jar version 1.2020.06:

@startuml
!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/1.2019.09/C4_Container.puml
!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons
!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5
' uncomment the following line and comment the first to use locally
' !include C4_Container.puml
!include DEVICONS/angular.puml
!include DEVICONS/dotnet.puml
!include DEVICONS/java.puml
!include DEVICONS/msql_server.puml
!include FONTAWESOME/server.puml
!include FONTAWESOME/envelope.puml

' LAYOUT_TOP_DOWN()
' LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()

title Container diagram for Internet Banking System

Person(customer, Customer, "A customer of the bank, with personal bank accounts")

System_Boundary(c1, "Internet Banking") {
    Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA", "java")
    Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser", "angular")
    Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device", "dotnet")
    ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.", "msql_server")
    Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", "server")
}

System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", "envelope")
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

Rel(customer, web_app, "Uses", "HTTPS")
Rel(customer, spa, "Uses", "HTTPS")
Rel(customer, mobile_app, "Uses")

Rel_Neighbor(web_app, spa, "Delivers")
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC")

Rel_Back(customer, email_system, "Sends e-mails to")
Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP")
Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
@enduml

and it outputs

[joao-martins-tdx]

Yes, the the 2019.09 branch of your PlantUML fork worked for me. The diagram was correctly inserted in the AsciiDoc.

Thanks, @adrianvlupu!

[joao-martins-tdx]

As as side note, the direct generation of the diagram from the .puml file stopped working when I used the C4_container from the above-mentioned branch instead of C4-PlantUML's C4_Container. I'm not sure if it's a bug, but it's not an issue for my and @carolinabrasio's use case, which is to include the diagram in an AsciiDoc. If we happen to need to generate the diagram directly from the .puml, we'll do so by using C4-PlantUML's C4_Container.

[adrianvlupu]

Glad it helped

Sadly the version that works with asciidoc doesn't work with the newer version of plantuml so you have to switch includes.

Can you tell me what plugin you use for asciidoc? Maybe there is a way to configure it to use the latest plantuml version

[joao-martins-tdx]

I use the asciidoctor-intellij-plugin.

As far as I can tell from the plugin's source code, it seems to be using asciidoctor-diagram version 2.0.5 to add PlantUML diagrams to AsciiDocs.

asciidoctor-diagram 2.0.5 in turn uses PlantUML 1.2020.06, based on asciidoctor-diagram's changelog. It makes sense that 1.2020.06 shows the syntax error mentioned in this issue, as according to PlantUML news,!procedure was introduced in PlantUML 1.2020.07.

It looks like asciidoctor-diagram 2.0.6 uses PlantUML 1.2020.21. One solution would probably be for the plugin to switch to that asciidoctor-diagram version.

[joao-martins-tdx]

Anyway, everything seems to point to this issue not being caused by C4-PlantUML.

[Potherca]

@joao-martins-tdx I think this issue can now be closed. Are you okay with that?

[joao-martins-tdx]

@Potherca Yes, you may close it.

It turns out that the issue wasn't actually caused by C4-PlantUML, but by asciidoctor-diagram pre 2.1.0 using an old version of PlantUML that doesn't support procedures. Everything is working correctly in asciidoctor-diagram 2.1.0.

Thank you for your support 🙏