Closed ezzle closed 7 months ago
LGTM, never hear about it, need to dive into the docs.
- image tag (! link and action inside the svg do not work)
- embeed tag
- inline svg
@ezzle Hi, would you mind explaining those terms/use-cases in detail, so that I can define the SVG output properly.
We can output the diagrams as raw <svg>
content or external file used on <img src="/path/to/diagram.svg" />
element.
Thank you for the support. You could begin with the inline option
inline svg = output the diagrams as raw <svg>
content = Raw svg directly inside the doc
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
image tag (! link and action inside the svg do not work) = external file used on
<img src="/path/to/diagram.svg" /> element.
An issue with this option, links in the svg are not clickable.
https://github.com/kazumatu981/markdown-it-kroki/issues/2
embeed tag = external resource used on but on an embed element
with src
either from external file src="/path/to/diagram.svg
or from direct call to kroki api <embed src="https://kroki.io/plantuml/svg/....">
https://www.w3schools.com/tags/tag_embed.asp
https://stackblitz.com/edit/vite-qdacts?file=docs%2Findex.md
Best regards,
Tshitshi
Thanks for the detials, will try to draft first implementation tonight
A simple guide to test and preview the module.
// hugo.toml
[[module.imports]]
path = "github.com/hugomods/kroki"
```kroki {_type="graphviz" _output="embed" class="class-one class-two" id="my-kroki-1" data-foo="bar"}
digraph G {Hello->World}
- `_type`: the diagram type.
- `_output`: `inline` (default) or `embed`.
- You can apply any valid attributes on the diagrams, such as the `class`, `id` and `data-foo`.
## 3. Using via Shortcode
```markdown
{{< kroki _name="diagrams/foo.dot" _type="graphviz" _output="embed" class="x y z" id="xyz" >}}
_name
: the file name, both of page resource and site resource are supported, such as content/page/diagrams/foo.dot
and assets/diagrams/foo.dot
._type
as same as code block way._output
as same as code block way.Both of <svg>
and <embed>
elements will have the .kroki
class name, apply styles on svg.kroki
and embed.kroki
to suit your theme's styles.
<img>
tag.According to your explainations above, seems we don't need it?
Will draft a release once you're satisifed with it.
Thank you. I am testing and will inform you
Best regards,
Tshitshi
Le lun. 11 mars 2024 à 14:11, Razon Yang @.***> a écrit :
A simple guide to test and preview the module.
- Import the module
// hugo.toml [[module.imports]]path = "github.com/hugomods/kroki"
- Using via Code Block
- `_type`: the diagram type. - `_output`: `inline` (default) or `embed`. - You can apply any valid attributes on the diagrams, such as the `class`, `id` and `data-foo`. ## 2. Using via Code Block ```markdown ```kroki {_type="graphviz" _output="embed" class="class-one class-two" id="my-kroki-1" data-foo="bar"} digraph G {Hello->World} - `_type`: the diagram type. - `_output`: `inline` (default) or `embed`, optional. - You can apply any valid attributes on the diagrams elements, such as the `class`, `id` and `data-foo`. ## 3. Using via Shortcode ```markdown {{< kroki _name="diagrams/foo.dot" _type="graphviz" _output="embed" class="x y z" id="xyz" >}} - _name: the file name, both of page resource and site resource are supported. - _type as same as code block way. - _output as same as code block way. - You can also attach any custom attributes. 4. Tweak Styles Both of <svg> and <embed> elements will have the .kroki class name, apply styles on svg.kroki and embed.kroki to suit your theme's styles. About the <img> tag. According to your explainations above, seems we don't need it? About release. Will draft a release once you're satisifed with it. — Reply to this email directly, view it on GitHub <https://github.com/hugomods/kroki/issues/4#issuecomment-1988408005>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALX32WMFJTUO4KFIRFOWJ4TYXWUO5AVCNFSM6AAAAABEQIGFX6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBYGQYDQMBQGU> . You are receiving this because you authored the thread.Message ID: ***@***.***>
Hi Razon, Thank you very much.
[x] Using via Code Block works fine.
[x] Using via Shortcode not working for me. No output on the doc and no error was reported on the console.
Later will create a repo for debugging and share the link.
The current testing just tried to validate that the 2 options are operational. The result: only 1 option is ok for me.
Later, more testing with real-life use cases and in combination with other hugomods modules. Thank you for the excellent work and the extreme reactivity.
Best regards,
Tshitshi
Update : All tests OK
Tested with real-life use cases and mixing with toggle module : All fine, inclusive with file from page ressource as well as from global ressource.
Good job!
I think you can release a first public version.
Best regards.
Tshitshi
Thx
Le jeu. 14 mars 2024 à 09:19, Razon Yang @.***> a écrit :
Done, https://github.com/hugomods/kroki/releases/tag/v0.1.0
— Reply to this email directly, view it on GitHub https://github.com/hugomods/kroki/issues/4#issuecomment-1996821846, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALX32WOV2I2TIJPCVT7DD7TYYFMQPAVCNFSM6AAAAABEQIGFX6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOJWHAZDCOBUGY . You are receiving this because you authored the thread.Message ID: @.***>
FYI, docs site is live now https://kroki.hugomods.com/, which provides detailed usages and examples.
Excellent!
Thank you
Tshitshi
Le ven. 15 mars 2024 à 09:45, Razon Yang @.***> a écrit :
FYI, docs site is live now https://kroki.hugomods.com/, which provides detailed usages and examples.
— Reply to this email directly, view it on GitHub https://github.com/hugomods/kroki/issues/4#issuecomment-1999184058, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALX32WNZC4ZU6VC2MFFTBLLYYKYJZAVCNFSM6AAAAABEQIGFX6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOJZGE4DIMBVHA . You are receiving this because you authored the thread.Message ID: @.***>
Hi
Requested Feature
A HugoMods module to support the kroki unified API for diagraming
Embedding options
diagram definition options
What'is Kroki
Kroki provides a unified API with support for BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag), BPMN, Bytefield, C4 (with PlantUML), D2, DBML, Ditaa, Erd, Excalidraw, GraphViz, Mermaid, Nomnoml, Pikchr, PlantUML, Structurizr, SvgBob, Symbolator, TikZ, UMLet, Vega, Vega-Lite, WaveDrom, WireViz... and more to come!
https://kroki.io/Third party integration
Initial shortcode approach from Joe Mooring
Use a fenced code block to embed an SVG image of a diagram in your [Hugo](https://gohugo.io/) site using the free [Kroki](https://kroki.io/) service. Unlike JavaScript solutions that require client-side rendering, this approach embeds an SVG image in your page.
https://www.veriphor.com/articles/diagrams/ https://www.veriphor.com/articles/diagrams/#source-codeInside Perplex Theme
This theme includes a codeblock render hook which allows to enhance the diagrams in a similar way as images.
https://perplex.desider.at/doc/plugin/kroki/Best regards,
Tshitshi