Feature-Request for exporting diagram

[jaime-olivares]

Feature-Request for exporting diagram

[TaiPhamD]

You're right with svg then I probably won't need png. How about in your hover menu can we make a "save as" option to save the picture? I click on the VS Code File then save menu and it didn't seem to let me save the svg.

[jaime-olivares]

We already have "SVG export" since the very beginning (use the {generate:true} directive).

Said that, converting SVG to a PNG is not a "straightforward" task for a javascript application. It is needed an entire rendering engine and usually will require native tools that won't work on every platform.

[aduh95]

Why would you have a PNG when you can have a SVG? I'm just curious of the use-case.

[jaime-olivares]

You can always use a screenshot tool

[arsonistgopher]

+1 for PNG!

[arsonistgopher]

Oh sure, I read the docs and figured that out. It's super useful. Thank you.

After getting other people to start using the plugin, something that comes up is a set of buttons like on https://github.com/AleksandarDev/vscode-sequence-diagrams to export SVG and PNG. It's great to export sequence diagrams in this way and I'm holding out hope here too! I do understand the technical aspects enough to know it isn't trivial and get it's a huge commitment. Still giving it a +1 ;-)

[DBJDBJ]

I dare to think, primary use case for yUML and this plugin, is not for drawing, but for creating a documentation with diagrams in it.

Thus the primary printing use-case is the one for printing the md files into documents. pdf documents will be super usefull.

Now. "Markdown PDF" extension is doing it but not supporting this extension. It is supporting PlantUML. But PlantUML I do not wish to use. That plugin requires complex external to VS Code, setup to be able to actually render the diagrams.

So do "we" nicely ask them to incorporate diagrams from this plugin too?

But, I am not aware of any pluginm that has the concept of page and paper sizes. Something rudimentary will do, like notepad for example.

Or have I missed a nugget in the ocean of VS Code plugins?

[jaime-olivares]

Hi @DBJDBJ et all,
Currently we have the capability to export to svg, and that image can be incorporated in a Markdown file. You just need to use the {generate: true} directive, as shown:

You can reference the generated svg from the markdown document, as shown:

The image will be shown in the markdown preview, at least using the Markdown Extended extension (jebbs.markdown-extended)

The Markdown PDF extension (yzane.markdown-pdf) is able to export the markdown along with the svg into PDF documents. The output for the example above is shown here:

All this capability sounds better than exporting the diagram directly to PDF. Why you would like to have a PDF file containing only one diagram? That said, I consider the request as satisfied and will close this post.

I am aware that some extensions are able to show PlantUML diagrams but I don't know if they will be keen on doing the same with yuml-diagram. I will try to contact them.

[DBJDBJ]

Many thanks @jaime-olivares . Clarifications (me drawing an diagram might be better :) )

I, and all the people delivering any kind of documentation dare I say, we do not require "a single diagram as pdf", we do require document as pdf . Documents. We have folders and files in them. We have no source code in there. We just do write document using markdown and yUML. With ot wouthout VS Code.
I for example am using HUGO.

And some of those documents do contain diagrams. Just like auto-generated code documentation with yUML diagrams added here and there. And then the ability to print all or some of them into the pdf's.

I do understand we are here out of the scope of yUML plugin. Your previous answer contains enough pointers for me to try and proceed.

Thanks ...

[DBJDBJ]

@jaime-olivares where and how your followers can "request of you" to develop a theme for HUGO that will contain the ability to "write" yUML diagrams using MarkDown extension. For example

        ```yuml
           (start)-->(end)
        ```

Above should generate yUML diagram in place. There is a theme doing this for "Mermaid" diagrams.
Mermaid is sort-of-a emulating PlantUML. Which is by now too big and too complex, yUML is much shorter lighter and functional. PlantUML is legacy.

Also, your work on formalizing the yUML syntax makes yUML approach more consistent.

[jaime-olivares]

@DBJDBJ

As you mentioned, this topic is out of the scope of this VSCode plugin. However, I already separated the diagram functionality from the plugin functionality. You can find the diagram functionality here: https://github.com/jaime-olivares/yuml-diagram

Any developer familiarized with development of HUGO plugins (I am not at all) can use the diagraming library for building a similar plugin.

[DBJDBJ]

Ah ok ball is in my court then ;) Alas I left JS and turned (again) to C++ ... Ok I shall give it a due dilligence ... Thanks