diff --git a/divers/README.md b/divers/README.md
index 9e61e2a..979df9a 100644
--- a/divers/README.md
+++ b/divers/README.md
@@ -2,12 +2,94 @@
$$
E=mc^2
$$
+-----------
+
+[panel.md](divers/panel.md)
+
+-----------
+
+
+# FAQ Section
+
+Introduction text for the FAQ page.
+
++ Question 1? +
+
+ Answer 1
+
++ Question 2? +
+
+ Answer 2
+
+
+-----------
+
+```mermaid
+zenuml
+ title Declare participant (optional)
+ Bob
+ Alice
+
+ Alice->Bob: Hi Bob
+ Bob->Alice: Hi Alice
+```
+
+-----------
+
+```mermaid
+%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+sequenceDiagram
+ Alice->>John: Hello John, how are you?
+ John-->>Alice: Great!
+ Alice-)John: See you later!
+ Alice->>John: See you later!
+```
+
+-----------
+
+```plantuml
+@startuml
+
+Alice ->> "Bob()" : Hello
+"Bob()" -> "This is very\nlong" as Long
+' You can also declare:
+' "Bob()" -> Long as "This is very\nlong"
+Long --> "Bob()" : ok
+@enduml
+
+```
+
+-----------
+-----------
+
[transmission_process.md](../infotro/SDi/transmission_process.md)
+
+-----------
+
## embedding it directly
+Theme valid: base, forest,
+```mermaid
+%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
+
+gitGraph
+ commit
+ commit
+ branch develop
+ checkout develop
+ commit
+ commit
+ checkout main
+ merge develop
+ commit
+ commit
+```
+
+-----------
+
```mermaid
graph TD;
A-->B;
@@ -16,6 +98,8 @@ graph TD;
C-->D;
```
+-----------
+
```plantuml
@startuml
Alice -> Bob: Authentication Request
@@ -26,10 +110,14 @@ Alice <-- Bob: another authentication Response
@enduml
```
+-----------
+
## load from external files
+-----------
+
## Wavedrom
```wavedrom
{ "signal": [
@@ -45,7 +133,9 @@ Alice <-- Bob: another authentication Response
{ "name": 'clk4', "wave": 'xlh.L.Hx' },
]}
```
------
+
+-----------
+
## Wavedrom register
```wavedrom
{"reg": [
diff --git a/divers/panel.md b/divers/panel.md
new file mode 100644
index 0000000..10cfc3a
--- /dev/null
+++ b/divers/panel.md
@@ -0,0 +1,365 @@
+# docsify-example-panels
+
+[](https://www.npmjs.com/package/docsify-example-panels)
+[](https://github.com/docsifyjs/awesome-docsify#plugins)
+[](https://app.codacy.com/app/VagnerDomingues/docsify-example-panels?utm_source=github.com&utm_medium=referral&utm_content=VagnerDomingues/docsify-example-panels&utm_campaign=Badge_Grade_Dashboard)
+[](https://github.com/VagnerDomingues/docsify-example-panels/blob/master/LICENSE)
+[](https://www.jsdelivr.com/package/npm/docsify-example-panels)
+[](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2FVagnerDomingues%2Fdocsify-example-panels&hashtags=docsify,developers,frontend,plugin,documentation)
+Star
+
+A [docsify.js](https://docsify.js.org) plugin for rendering example panels content from markdown.
+
+
+
+
+
+## Demo
+
+
+
+If you are on widescreen, checkout the *right* panel, *right* there →
+
+
+
+This is an example panel.
+
+You can see it's usage in practice in the docs listed below:
+
+- [Fairlay API](https://fairlay.com/api)
+- [FLAP services](https://docs.flap.cloud/#/create_new_service?id=special-files)
+
+please contact me if you use docsify-example-panels. i would like to display it here too.
+
+
+
+## Features
+
+
+
+**Advantages**
+
+- Create div panels really fast and anywhere in your .md file.
+- Choose the classnames for your divs and stylize them.
+- Use CSS custom properties to change it's structure.
+- Prefab CSS classes for "left-panel", "right-panel" and "title-panel".
+
+**Compatibility**
+
+- Fully compatible with any markdown or html features:
+
+
+ code snippets
+
+```html
+
+
+
+```
+
+
+
+
+ quotes
+
+> just a quote
+
+?> a cooler quote... (at least i think it is)
+
+
+
+
+ images (memorable)
+
+
+
+
+
+- Fully compatible with major docsify plugins such as:
+
+> [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/)
+>
+> [docsify-tabs](https://jhildenbiddle.github.io/docsify-tabs/)
+>
+> [docsify-copy-code](https://github.com/jperasmus/docsify-copy-code)
+>
+> [docsify-pagination](https://github.com/imyelo/docsify-pagination)
+
+**Limitations**
+
+*Nesting* (i.e panels within panels) all pannels are rendered as siblings, Nesting only avaiable throught post-render javascript code.
+
+
+
+For multi-language documentation you can use it along with [docsify-tabs](https://jhildenbiddle.github.io/docsify-tabs/):
+
+
+
+### **HTML**
+
+```html
+
+
Heading
+
This is a paragraph.
+```
+
+### **JS**
+
+```js
+// JavaScript
+function add(a, b) {
+ return Number(a + b);
+}
+```
+
+### **CSS**
+
+```css
+/* CSS */
+body {
+ background: white;
+}
+```
+
+
+
+
+
+## Installation
+
+
+
+Just add the docsify-example-panels plugin to your `HTML` after docsify and you'll be ready to go.
+
+
+
+```html
+
+
+
+
+
+```
+
+
+
+## Usage
+
+
+
+1. Define a panel in markdown file using `panels:start` and `panels:end` HTML comments.
+
+ HTML comments are used to mark the start and end of a panel. The use of HTML comments prevents any markup from being displayed when markdown is rendered as HTML outside of your docsify site (e.g. Github, GitLab, etc).
+
+
+
+```markdown
+
+
+(...) - Awesome div wrapper
+
+
+```
+
+
+
+2. Define divs within a panel in markdown file using HTML comments.
+
+ The character sequence after double dot : will be rendered as the classname of the div content. all proceeding content will be associated with that div up to start of the next div `div:class` or end of panel `panels:end` comments.
+
+
+
+```markdown
+
+
+
+ (...) - Awesome title
+
+
+
+ (...) - Awesome explanation
+
+
+
+
+ (...) - Awesome example
+
+
+```
+
+
+
+3. You can add a custom class aswell.
+
+ perphaps you want something like a "floating-cat" class
+
+
+
+```markdown
+
+
+
+...
+
+
+```
+
+
+
+## Customization
+
+
+
+### Properties
+
+Allows you to customize panels styles without rewriting any CSS rule.
+
+
+
+```css
+:root{
+ /* Document */
+ --docsify-example-panels-document-width: 90%;
+
+ /* Wrapper */
+ --docsify-example-panels-wrapper-width: 100%;
+
+ /* Standards */
+ --docsify-example-panels-padding-inner : 8px 16px;
+ --docsify-example-panels-padding-surroundings : 0px;
+
+ /* Panel Left */
+ --docsify-example-panels-left-panel-background : transparent;
+ --docsify-example-panels-left-panel-width : 60%;
+
+ /* Panel Right */
+ --docsify-example-panels-right-panel-background : transparent;
+ --docsify-example-panels-right-panel-width : 40%;
+
+ /* Titles */
+ --docsify-example-panels-title-background: transparent;
+}
+```
+
+
+
+### Custom Properties
+
+You can change properties by adding a `
+```
+
+
+
+
+### Custom Styles
+
+Custom styles can be created using the classname you choosed in markdown
+
+The main purpose of this plugin is to ease and rush the production of any markdown written documentation using the right panel as code examples.
+
+But let's suppose you indeed wants to add a floating cat in your documentation, like i did.
+
+ In case you insisted to read this in github url the cat image won't be so floating.
+
+
+
+
+
+
+
+
+
+
+1. Add this to your markdown:
+
+
+
+```markdown
+
+
+
+
+
+
+```
+
+
+
+2. will be rendered like this:
+
+
+
+```html
+
+
+
+
+
+```
+
+
+
+3. Then you can play with css animations:
+
+
+
+```css
+.floating-cat{
+ position:absolute;
+ right: 0px;
+ width: 200px;
+ height: 360px;
+ z-index: 1000;
+
+ -webkit-filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.6));
+ filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.6));
+
+ transform: translatey(0px);
+ animation: float 6s ease-in-out infinite;
+}
+@keyframes float {
+ 0% {
+ -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.8));
+ filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.6));
+ transform: translatey(0px);
+ }
+ 50% {
+ box-shadow: drop-shadow(0px 25px 10px rgba(0,0,0,0.4));
+ filter: drop-shadow(0px 25px 10px rgba(0,0,0,0.2));
+ transform: translatey(-20px);
+ }
+ 100% {
+ box-shadow: drop-shadow(0px 5px 5px rgba(0,0,0,0.8));
+ filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.6));
+ transform: translatey(0px);
+ }
+}
+```
+
+
+
+## Contact & Support
+
+- Create a [GitHub issue](https://github.com/VagnerDomingues/docsify-example-panels/issues) for bug reports, feature requests, or questions
+- Add a ⭐️ [star on GitHub](https://github.com/VagnerDomingues/docsify-example-panels) or ❤️ [tweet](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2FVagnerDomingues%2Fdocsify-example-panels&hashtags=docsify,developers,frontend,plugin,documentation) to support the project!
+
+## License
+
+This project is licensed under the [MIT license](https://github.com/VagnerDomingues/docsify-example-panels/blob/master/LICENSE).
+
+Plugin created by [Vagner Domingues Madeira](https://github.com/VagnerDomingues/)
+
+
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
index eeb67e4..cc31608 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,7 @@
+
+```
+
+
+
+
+
+
+
+
+```
+
+
+
+2. will be rendered like this:
+
+
+
+```html
+