<commit_before>:jbake-order: 100
:filename: 020_tutorial/100_diagrams.net.adoc
include::_config.adoc[]

== Diagrams: Diagrams.net

There is no `exportDiagramsnet` or `exportDrawio` task, because working with these diagrams is more convenient than with the other diagramming tools.

https://app.diagrams.net/[Diagrams.net] (formerly known as Draw.io) is a neat little tool which is able to store the source of your diagrams in the meta-data of your `.png` or `.svg` files.
To recognize these files as diagrams.net files, give them the extension `myfile**.dio.png**` or `myfile**.dio.svg**`.

In IntelliJ, with the asciidoctor and diagrams.net plugin installed, type something like

[source, asciidoc]
----
image::mynewdiagram.dio.png[]
----

:experimental:

IntelliJ will show you that the file doesn't exist.

image::diagramsnet1.png[width=416]

Press kbd:[alt + shift + enter] to create the file.
IntelliJ will then launch a local copy of the diagrams.net editor.

Every change in the diagram will be directly reflected in your document.

.just a demo image
image::mynewdiagram.dio.png[]<commit_msg>update reference to intellij plugins<commit_after>:jbake-order: 100
:filename: 020_tutorial/100_diagrams.net.adoc
include::_config.adoc[]

== Diagrams: Diagrams.net

There is no `exportDiagramsnet` or `exportDrawio` task, because working with these diagrams is more convenient than with the other diagramming tools.

https://app.diagrams.net/[Diagrams.net] (formerly known as Draw.io) is a neat little tool which is able to store the source of your diagrams in the meta-data of your `.png` or `.svg` files.
To recognize these files as diagrams.net files, give them the extension `myfile**.dio.png**` or `myfile**.dio.svg**`.

In IntelliJ, with the https://plugins.jetbrains.com/plugin/7391-asciidoc[asciidoctor plugin] and the https://plugins.jetbrains.com/plugin/15635-diagrams-net-integration[diagrams.net plugin] installed, type something like

[source, asciidoc]
----
image::mynewdiagram.dio.png[]
----

:experimental:

IntelliJ will show you that the file doesn't exist.

image::diagramsnet1.png[width=416]

Press kbd:[alt + shift + enter] to create the file.
IntelliJ will then launch a local copy of the diagrams.net editor.

Every change in the diagram will be directly reflected in your document.

.just a demo image
image::mynewdiagram.dio.png[]

[.button1]
https://plugins.jetbrains.com/plugin/7391-asciidoc[asciidoctor plugin]

[.button2]
https://plugins.jetbrains.com/plugin/15635-diagrams-net-integration[diagrams.net plugin]

++++
<script src="https://plugins.jetbrains.com/assets/scripts/mp-widget.js"></script>
<script>
  // Please, replace #yourelement with a real element id on your webpage
  MarketplaceWidget.setupMarketplaceWidget('install', 7391, ".button1");
  MarketplaceWidget.setupMarketplaceWidget('install', 15635, ".button2");
</script>
++++
{'fraction_non_alphanumeric': 0.11494252873563218, 'fraction_numerical': 0.019853709508881923, 'mean_word_length': 4.95850622406639, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 7, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4544566', 'n_tokens_mistral': 965, 'n_tokens_neox': 888, 'n_words': 298}