by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Guillaume Grossetie
    @Mogztter
    I've fixed two issues and upgrade PlantUML and Vega-Lite to the latest version
    Adrian Kosmaczewski
    @akosma_gitlab
    deploying! Thanks a lot
    Guillaume Grossetie
    @Mogztter
    That was fast :rocket:
    Marcel Stör
    @marcelstoer

    I just started playing with the AsciiDoctor extension. Good stuff, I like it :thumbsup: What could be the reason Kroki's Mermaid sequence diagram example at https://kroki.io/examples.html#mermaid-seqdiag doesn't work with this extension?

    I have that code 1:1 inside the .adoc like so:

    [mermaid]
    ....
    sequenceDiagram
      participant Alice
      participant Bob
      Alice->John: Hello John, how are you?
      loop Healthcheck
        John->John: Fight against hypochondria
      end
      Note right of John: Rational thoughts prevail...
      John-->Alice: Great!
      John->Bob: How about you?
      Bob-->John: Jolly good!
    ....

    I see the SVG is correctly fetched from kroki.io, I see the SVG itself is fine. Yet, the HTML document shows no diagram at all. The browser says the image be 0x0 pixels.

    Screenshot 2020-04-09 at 17.10.16.png
    If I manually add a style="width or style="height via the browser dev tools the image becomes visible. The behavior is consistent across all three browsers I tested.
    Marcel Stör
    @marcelstoer
    Other Mermaid diagrams work ok.
    Guillaume Grossetie
    @Mogztter
    Hello @marcelstoer :wave:
    The issue is that Mermaid generate a diagram without an explicit width and height
    They are using width=100% and height=100% but since the <img> does not have a fixed size it will be 100% of 0px
    so you will need to force a width using CSS
    I believe that you can add role to the [mermaid] block to add a CSS class to the block
    Marcel Stör
    @marcelstoer
    Oh, I see, that's what's going on...And obviously that's inconsistent across their diagram types. Some are like that while other's aren't (flow charts have an explicit width).
    Which project should have documentation about what properties [mermaid] (or other diagram libs) supports?
    Guillaume Grossetie
    @Mogztter
    If the generated SVG is inconsistent we should open an issue on the mermaid project: https://github.com/mermaid-js/mermaid
    It's not really about what properties are supported or not but more about how the SVG is generated
    I believe that it's a good practice to set a fixed height and width
    Since it's a scalable vector you get an initial size and ratio from the width and height and then you can decide to scale depending the box
    I don't think that Kroki can infer the width/height
    So it's probably best to ask the Mermaid project to set an explicit width and height
    But it's a good idea to add a note somewhere to warn users about this limitation
    Feel free to open an issue or submit a pull request to improve the documentation
    I think that svgbob is also using 100% width and height but I might be wrong, I need to check
    Marcel Stör
    @marcelstoer

    Yeah, that SVG inconsistency is one thing. If I were mermaid though I would argue that it's the "container" (i.e. <img> or a surrounding <div>) that has to define the dimension as I - the SVG producer - have no idea where I am being embedded into.

    With documentation was referring to the [] notation in AsciiDoc pages. For example, in the asciidoctor-kroki README you have [plantuml,alice-bob,svg,role=sequence]. All the parameters in there besides plantuml: where are they documented?

    Guillaume Grossetie
    @Mogztter
    we are trying to stay compatible with Asciidoctor diagram
    Yeah, that SVG inconsistency is one thing. If I were mermaid though I would argue that it's the "container" (i.e. <img> or a surrounding <div>) that has to define the dimension as I - the SVG producer - have no idea where I am being embedded into.
    I don't know, width 100% and height 100% are not helpful, the generated diagram knows the size (see viewBox)
    the SVG will obey to the container size anyway
    so having a default size is probably best than 100% of potential nothing
    most of the diagram libraries are using fixed width and height when generating svg
    Marcel Stör
    @marcelstoer

    we are trying to stay compatible with Asciidoctor diagram

    Ok, that would be another valuable information to see prominently featured on your README.

    Guillaume Grossetie
    @Mogztter
    :+1:
    for Mermaid, since the size is present in the viewBox we could override the width and height attribute in Kroki.
    Guillaume Grossetie
    @Mogztter
    and the upstream issue: blockdiag/blockdiag#110
    please note that diagram attributes are not supported since the Kroki API does not support specific attributes: https://github.com/asciidoctor/asciidoctor-diagram#diagram-attributes
    Guillaume Grossetie
    @Mogztter
    I also wonder if we should use the width and height attribute to set the width and height on the img element when using SVG (AFAIK Asciidoctor diagram is passing these attributes to the diagram library but do not use them to set the width and height on the img element)
    Marcel Stör
    @marcelstoer
    yuzutech/kroki#39 was closed prematurely then? It isn't fixed yet for at least Mermaid SeqDiag (what I was testing)?
    if the width and height is in % it will take the viewBox
    indeed, I forgot Mermaid
    Marcel Stör
    @marcelstoer
    That looks sane, yes.
    Guillaume Grossetie
    @Mogztter
    SeqDiag is not working?
    Marcel Stör
    @marcelstoer
    Guillaume Grossetie
    @Mogztter
    Oh you mean Mermaid sequence diagram, we also have a diagram library called SeqDiag
    Marcel Stör
    @marcelstoer
    Oops, misunderstanding, sorry. I thought you were using SeqDiag as a general abbreviation for sequence diagram.
    Guillaume Grossetie
    @Mogztter
    no worries :)
    Guillaume Grossetie
    @Mogztter
    First successful release with GitHub Actions for the Asciidoctor Kroki Extension: https://github.com/Mogztter/asciidoctor-kroki/releases/tag/v0.8.1
    @marcelstoer I've added the unxhr dependency so you should be able to remove the explicit dependency on your playbook package.json file