Merge pull request #69 from MikhailKravets/2.1.0

2.1.0

README.md

@@ -177,7 +177,18 @@ plugins:
 This approach works a bit faster than [plantuml.com](https://www.plantuml.com/plantuml/)
 and you can avoid `509 Bandwidth Limit Exceeded` error.
 
-### Standalone usage
+## HTTP with Self-Signed SSL Certificates
+
+Under the hood, `mkdocs_puml` uses `httpx`. If you're running PlantUML server
+with self-signed certificates you need to set `SSL_CERT_FILE` or
+`SSL_CERT_DIR` before running `mkdocs`.
+
+For additional information refer to `httpx` documentation
+
+- [SSL](https://www.python-httpx.org/advanced/ssl/#making-https-requests-to-a-local-server)
+- [Environment Variables](https://www.python-httpx.org/environment_variables/#ssl_cert_dir)
+
+## Standalone usage
 
 You can use `PlantUML` converter without `mkdocs`. See an example below
 

mkdocs_puml/__init__.py

@@ -1,3 +1,3 @@
 """Package that brings PlantUML to MkDocs"""
 
-__version__ = "2.0.0"
+__version__ = "2.1.0"

mkdocs_puml/plugin.py

@@ -32,10 +32,13 @@ class PlantUMLPlugin(BasePlugin[PlantUMLConfig]):
     Attributes:
         pre_class_name (str): the class that will be set to intermediate <pre> tag
                               containing uuid code
-        config_scheme (str): config scheme to set by user in mkdocs.yml file
+        container (str): html element where the diagrams will be inserted.
+                         **DO NOT** insert any `\n` characters, as the Markdown parser will convert them into
+                         `<p>...</p>`, which may result in an unexpected html
     """
 
     pre_class_name = "diagram-key"
+    container = "<div class='puml-container'>{}</div>"
 
     def __init__(self):
         self.regex: typing.Optional[typing.Any] = None
@@ -117,11 +120,12 @@ def on_page_markdown(self, markdown: str, *args, **kwargs) -> str:
         ):
             schemes = self.regex.findall(markdown)
 
+            # DO NOT insert `\n` characters in the replacement!
             for v in schemes:
                 if self.themer:
-                    replace_into = self._store_dual(v)
+                    replace_into = self.container.format(self._store_dual(v))
                 else:
-                    replace_into = self._store_single(v)
+                    replace_into = self.container.format(self._store_single(v))
                 markdown = markdown.replace(
                     f"```{self.puml_keyword}{v}```",
                     replace_into,
@@ -146,7 +150,7 @@ def _store_dual(self, scheme: str) -> str:
         key_dark = self.storage.add(d_dark)
 
         return (
-            f'<pre class="{self.pre_class_name}">{key_light}</pre>\n'
+            f'<pre class="{self.pre_class_name}">{key_light}</pre>'
             f'<pre class="{self.pre_class_name}">{key_dark}</pre>'
         )
 

pyproject.toml

@@ -24,7 +24,3 @@ Repository = "https://github.com/MikhailKravets/mkdocs_puml"
 
 [project.entry-points."mkdocs.plugins"]
 plantuml = "mkdocs_puml.plugin:PlantUMLPlugin"
-
-[tool.flit.sdist]
-# Specify the files to include in the source distribution
-include = ["mkdocs_puml/static/puml.css"]

themes/README.md

@@ -6,6 +6,8 @@
 |:----------:|:--------------:|:-----:|:-----:|:------:|:-----------------------:|
 |    `default`     | <ul><li>`light`</li><li>`dark`</li></ul> | ✅ | ✅ | ✅ | [**themes/default**](default/README.md) |
 | `catppuccin` | <ul><li>`latte`</li><li>`latte-white`</li><li>`frappe`</li><li>`macchiato`</li><li>`mocha`</li></ul> | ✅ | ✅ | ✅ | [**themes/catppuccin**](catppuccin/README.md)|
+| `nord` | <ul><li>`day`</li><li>`night`</li></ul> | ✅ | ✅ | ✅ | [**themes/nord**](nord/README.md) |
+| `kanagawa` | <ul><li>`fuji`</li><li>`wave`</li></ul> | ✅ | ✅ | ✅ | [**themes/kanagawa**](kanagawa/README.md)|
 
 ## How to use themes
 

themes/catppuccin/README.md

@@ -56,12 +56,12 @@ Sequence diagram with groups, notes, and dividers looks
 |![macchiato](examples/sequence/sequence-full-macchiato.svg)|![mocha](examples/sequence/sequence-full-mocha.svg)|
 |**catppuccin/macchiato**|**catppuccin/mocha**|
 
-### Entities Diagram
+### Entity Diagram
 
 |**catppuccin/latte**|**catppuccin/frappe**|
 |:-------:|:--------:|
-|![latte](examples/entities/entities-latte.svg)|![frappe](examples/entities/entities-frappe.svg)|
-|![macchiato](examples/entities/entities-macchiato.svg)|![mocha](examples/entities/entities-mocha.svg)|
+|![latte](examples/entity/entity-latte.svg)|![frappe](examples/entity/entity-frappe.svg)|
+|![macchiato](examples/entity/entity-macchiato.svg)|![mocha](examples/entity/entity-mocha.svg)|
 |**catppuccin/macchiato**|**catppuccin/mocha**|
 
 ### Timing

themes/kanagawa/README.md

@@ -0,0 +1,66 @@
+<h3 align="center">
+
+<img src="img/[email protected]" width=200 />
+
+🌊 kanagawa 🌊
+</h3>
+
+-----------------
+
+Kanagawa theme implements a color palette defined in [kanagawa.nvim](https://github.com/rebelot/kanagawa.nvim). This color scheme is inspired by Katsushika Hokusai’s work,
+especially, his famous "The Great Wave".
+
+## How to use
+
+In order to use this theme with `mkdocs_puml`, set `theme` config of the plugin as follows:
+
+```yml
+theme:
+    light: kanagawa/fuji
+    dark: kanagawa/wave
+```
+
+## Flavors
+
+This theme has two flavors
+
+- `fuji` for light mode
+- `wave` for dark mode
+
+|**kanagawa/fuji**|**kanagawa/wave**|
+|:-------:|:--------:|
+|![](examples/classes/classes-fuji.svg)|![](examples/classes/classes-wave.svg)|
+
+## Examples
+
+Let's take a look at some diagrams other diagrams with `kanagawa` theme.
+
+### Sequence
+
+|**kanagawa/fuji**|**kanagawa/wave**|
+|:-------:|:--------:|
+|![](examples/sequence/sequence-fuji.svg)|![](examples/sequence/sequence-wave.svg)|
+
+### Activity
+
+|**kanagawa/fuji**|**kanagawa/wave**|
+|:-------:|:--------:|
+|![](examples/activity/activity-fuji.svg)|![](examples/activity/activity-wave.svg)|
+
+### State
+
+|**kanagawa/fuji**|**kanagawa/wave**|
+|:-------:|:--------:|
+|![](examples/state/state-fuji.svg)|![](examples/state/state-wave.svg)|
+
+### Entity
+
+|**kanagawa/fuji**|**kanagawa/wave**|
+|:-------:|:--------:|
+|![](examples/entity/entity-fuji.svg)|![](examples/entity/entity-wave.svg)|
+
+### C4
+
+|**kanagawa/fuji**|**kanagawa/wave**|
+|:-------:|:--------:|
+|![](examples/c4/c4-fuji.svg)|![](examples/c4/c4-wave.svg)|

themes/kanagawa/examples/activity/activity.puml

@@ -0,0 +1,16 @@
+@startuml
+!include https://raw.githubusercontent.com/MikhailKravets/mkdocs_puml/themes/themes/kanagawa/fuji.puml
+
+skinparam backgroundcolor white
+start
+fork
+  :action 1;
+fork again
+  :action 2;
+fork again
+  :action 3;
+fork again
+  :action 4;
+end merge
+stop
+@enduml

themes/kanagawa/examples/c4/c4.puml

@@ -0,0 +1,28 @@
+@startuml
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+
+!include https://raw.githubusercontent.com/MikhailKravets/mkdocs_puml/themes/themes/kanagawa/fuji.puml
+
+' skinparam backgroundcolor white
+
+!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
+!include DEVICONS/angular.puml
+!include DEVICONS/java.puml
+!include DEVICONS/msql_server.puml
+!include DEVICONS/redis.puml
+!include FONTAWESOME/users.puml
+
+Person(user, "Customer", "People that need products", $sprite="users")
+Container(spa, "SPA", "angular", "The main interface that the customer interacts with", $sprite="angular")
+Container(api, "API", "java", "Handles all business logic", $sprite="java")
+
+Container_Boundary(db_boundary, "Databases"){
+ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information", $sprite="msql_server")
+ContainerDb(redis, "Cache & MB", "Redis", "Cache and simple message broker", $sprite="redis")
+}
+
+Rel_D(user, spa, "Uses")
+Rel_R(spa, api, "Uses")
+Rel_R(api, db, "Reads/Writes")
+@enduml