Saltar a contenido

Dokumentador


Esta sección integra ejemplos de la herramienta de documentación rápida Dokumentador, que permite a partir de archivos de texto tipo Markdown generar de forma ágil y rápida documentación HTML en forma de un sitio web, documentos PDF, DOCX y ODT, este tipo de textos, es generada por la mayoría de informáticos para aquellas actividades, procesos, desarrollo, compilación, ensamblado, etc., que requieren ser documentados y se tiene poco tiempo para ello.

Creación de un proyecto  

Para iniciar con la documentación de un proyecto, basta estar dentro de la carpeta que contiene al proyecto a documentar y crear un archivo de configuración dokum.yml y una carpeta llamada docs, la estructura necesaria para un proyecto es:

dokum.yml      # Archivo de configuración del proyecto para su documentación
docs           # Carpeta que contiene la documentación tipo Markdown
docs/index.md  # Archivo de ejemplo de indice

Configuración  

El archivo dokum.yml contiene las entradas de configuración del Dokumentador:

Etiqueta Descripción
site_name Nombre del proyecto.
site_description Descripción del sitio.
site_dir Carpeta que salida de documentación generada.
docs_dir Carpeta que incluye los archivos de documentación a procesar.
theme Configuración del tema usado en la generación del Site y documentos.
nav Sección del layout de la documentación.

Ejemplo:

# Nombre del proyecto
site_name: Dokumentador Ejemplo
# Descripción del proyecto
site_description: Documentación Markdown para proyectos con Dokumentador.
# Carpeta que incluye los archivos de documentación a procesar
docs_dir: docs
# Carpeta que salida de documentación generada
site_dir: target/site

# Configuración del tema usado
theme:
    # Definición de colores
    palette:
        primary: teal
        accent: teal
    # Logo desplegado
    logo:  img/logo.svg
    # Icono de pagina
    favicon: img/favicon.ico

# Layout de la documentación
nav:
    - Inicio: index.md
    - Proyecto Ejemplo:
        - Manual: app/manual.md
        - Estructura: app/estructura.md
        - Requerimientos: app/requerimientos.md

Ajuste de Tema  

El Dokumentador utiliza un template genérico para construir el sitio Web y los archivos de documentos. Este template o tema permite hacer ciertas modificaciones para adecuar una generación con una imagen corporativa.

Icono  

El icono o favicon usado por el sitio Web se define en la etiqueta favicon, ejemplo:

theme:
    # Icono de pagina
    favicon: img/favicon.ico

Se permite incluir una imagen personalizada dentro de la documentación generada como logo corporativo, y está definida por la etiqueta logo:

theme:
    # Logo desplegado
    logo:  img/logo.svg

Colores  

Los colores usados por el tema del sitio están definidos por la sección palette, la cual tiene 2 opciones, los colores primarios primary y la de secundarios accent.

Para el caso de los colores primarios se tiene la siguiente lista y se puede hacer clic para cambiar el tema actual para probar:

Para los colores secundarios o de realce para algunos elementos se tiene la siguiente paleta:

Agregar contenidos  

Para agregar contenidos al site y la documentación generada, basta con crear archivos de texto con formato Markdown, estos con extensión .md, y agregarlo dentro del archivo de configuración dokum.yml, agregando el nuevo archivo dentro de la sección de nav como se muestra a continuación.

# Nombre del sitio del proyecto
site_name: Proyecto

# Layout de la documentación
nav:
    - Home: index.md
    - New: newPage.md   # Pagina nueva
    - About: about.md

Si se requiere más información sobre el proceso de documentación se puede consultar la página de Dokumentador.

Lenguaje Markdown

La documentación de cualquier proyecto en todos sus componentes es tardada, tortuosa y nunca se tiene tiempo suficiente, por lo anterior la mayoría de las veces sólo se documenta en archivos de texto TXT, para esto se inventó el lenguaje Markdown, que es un lenguaje muy ligero y que a partir de archivos de texto comunes, se puedan enriquecer y generar documentos más complejos.

Los archivos de texto tipo Markdown tiene una nomenclatura para crear los efectos en los contenidos como son: índices, tablas, recuadros, estilos, etc.; se recomienda leer los siguiente artículos para tener una mejor compresión del uso de este lenguaje a la hora de escribir la documentación.

Descarga de Documentos  

La documentación generada puede incluir los archivos PDF, archivo original Markdown y próximamente DOCX, para descargar el archivo PDF hacer clic en el icono , para el archivo fuente Markdown en , para el DOCX en y para el ODT en .

Ejemplos

A continuación se muestran algunos de los ejemplos para la generación de documentos con el Dokumentador.

Secciones  

El Dokumentador permite crear y separar las secciones en nuestros documentos usando el estándar Markdown. Estas secciones son usadas para los accesos dinámicos o ligas dentro del sitio Web y archivos PDF & DOC .

 Ejemplo

Ejemplo de secciones:

1er Nivel encabezado

2o Nivel encabezado

3er Nivel encabezado

El encabezado más pequeño

 Texto Fuente

Ejemplo de secciones:

# 1er Nivel encabezado
## 2o Nivel encabezado
### 3er Nivel encabezado
###### El encabezado más pequeño

Manejo de Texto  

El Dokumentador soporta el estándar Markdown para el manejo de los textos.

 Ejemplo

Markdown tiene las siguientes funciones básicas:

Texto Alterno Resultado
*Itálica* _Itálica_ Itálica
**Bold** __Bold__ Bold
**Bold _Itálica_** __Bold *Itálica*__ Bold Itálica
texto ==remarcado== texto remarcado
texto ~~tachado~~ texto tachado
texto `resaltado` texto resaltado
texto^\ superscript^ texto superscript
texto~\ subscript~ texto subscript
--- ***

También se permite el manejo de bloques de texto.

Ejemplo 1:

Bloque de texto 1

Ejemplo 2:

Bloque 2 Texto 2a linea

Ejemplo 3:

Bloque 3
Texto 2a linea

 Texto Fuente

_Markdown_ tiene las siguientes funciones básicas:

Texto       | Alterno    |  Resultado
:--------------: | :-------------: | :-------------:
```*Italica*``` | ```_Italica_``` | _Italica_
```**Bold**```  | ```__Bold__``` | __Bold__
```texto ==remarcado==``` |    |  texto ==remarcado==
``` texto `resaltado` ``` |   | texto `resaltado`
```texto^\ superscript^``` |   | texto^\ superscript^
```texto~\ subscript~``` |   | texto~\ subscript~
```---```       | ```***``` |  ---

---

También se permite el manejo de bloques de texto.

Ejemplo 1:
>```
Bloque de texto 1
>```

Ejemplo 2:

>Bloque 2
>Texto 2a linea

Ejemplo 3:

    Bloque 3
    Texto 2a linea

Símbolos y Fórmulas  

El Dokumentador soporta la funcionalidad del manejo de Símbolos de Markdown:

 Ejemplo

Se permite uso de símbolos mediante la siguientes combinaciones de texto:

Texto Resultado Texto Resultado
(tm) <--
(c) © <-->
(r) ® =/=
c/o 1/4, etc. ¼, etc.
+/- ± 1st 2nd etc. 1st 2nd etc.
-->

Adicionalmente Dokumentador extiende esta funcionalidad y soporta el manejo de Fórmulas Matemáticas :

p(x|y) = \frac{p(y|x)p(x)}{p(y)}

 Texto Fuente

Se permite uso de símbolos mediante la siguientes combinaciones de teto:

Texto       | Resultado    |  Texto       | Resultado
:------: |:------: | :------: | :------:
`(tm)`         | (tm)         |  `<--`          | <--
`(c)`          | (c)          |  `<-->`         | <-->
`(r)`          | (r)          |  `=/=`          | =/=
`c/o`          | c/o          |  `1/4, etc.`    | 1/4, etc.
`+/-`          | +/-          |  `1st 2nd etc.` |1st 2nd etc.
`-->`          | -->          |

---

El __Dokumentador__ extiende esta funcionalidad y soporta el manejo de [Fórmulas Matemática con (mathjax)][] :

\math {
    p(x|y) = \frac{p(y|x)p(x)}{p(y)}
}\math

Incluir

Markdown permite incluir elementos externos:

 Ejemplo

  • Contenido de archivos de texto Markdown:

    Este contenido es de un archivo externo de texto tipo Markdown


  • Imágenes locales:

Icono

  • Imágenes remotas:

Icono

Adicionalmente el Dokumentador ofrece un plugin para manejar las imágenes de una forma mejorada con solo usar el token para imágenes individuales:

![Texto referencia][Dirección de imagen][Opciones]

o para galerías de imágenes:

![Txt Galería, Txt Ref Img1, etc][Dir img1,Dir img 2][Opciones]

Las opciones pueden venir o no y son para crear un efecto de zoom de la imagen o galería de imágenes dentro de un diálogo, estas opciones son las siguientes:

  • id : ID del Grupo de imágenes para agruparlas en el desplegado.
  • altimg: Imagen o Lista de imágenes alternas con resolución completa a desplegar en el diálogo.

Ejemplo de imagen:

Johann Sebastian Bach
Johann Sebastian Bach

Ejemplos Galerías:

Paisaje 1
Paisaje 1
Paisaje 2
Paisaje 2
ArdillaKoalaLeón
Animales

 Texto Fuente

- Contenido de archivos de texto `Markdown`:

{\!extras/dokum/test.md!}

---

- Imágenes locales:

![Icono](img/document.png)

- Imágenes remotas:

![Icono](http://iconbug.com/data/4d/64/9f5614cc92f4f1bb2de84cc6d9a6acd1.png)

Adicionalmente el __Dokumentador__ ofrece un plugin para manejar las imágenes de una forma mejorada con solo usar el token para imágenes individuales:

`![Texto referencia][Dirección de imagen][Opciones]`

o para galerías de imágenes:

`![Txt Galería, Txt Ref Img1, etc][Dir img1,Dir img 2][Opciones]`

Las opciones pueden venir o no y son para crear un efecto de zoom de la imagen o galería de imágenes dentro de un diálogo, estas opciones son las siguientes:

- __id__ :   ID del _Grupo_ de imágenes para agruparlas en el desplegado.
- __altimg__:  Imagen o Lista de imágenes alternas con resolución completa a desplegar en el diálogo.

Ejemplo de imagen:

![Johann Sebastian Bach][img/bach_s.jpg][id=bach;altimg=img/bach.jpg;last]

Ejemplos Galerías:

![Paisaje 1][img/lugar1_s.jpg][id=bloque1;altimg=img/lugar1.jpg]

![Paisaje 2][img/lugar2_s.jpg][id=bloque1;altimg=img/lugar2.jpg;last]

![Animales,Ardilla,Koala,León][img/ani1_s.jpg,img/ani2_s.jpg,img/ani3_s.jpg][id=bloque2;altimg=img/ani1.jpg,img/ani2.jpg,img/ani3.jpg;last]

Ligas

El manejo de Ligas o Links es soportado:

 Ejemplo

  • URLs relativos o a secciones de la misma página:

Textos

Ejemplos


  • URLs externo

Google

 Texto Fuente

- URLs relativos o a secciones de la misma página:

[Textos](dokum.html#manejo_de_texto)

[Ejemplos](#ejemplos)

---

- URLs externo

[Google](https://www.google.com)

Listas

El soporte de Markdown permite el uso Listas o List en una forma simple.

 Ejemplo

  • Sección 1
  • Sección 2
  • Sección 3

  1. Numeral 1
  2. Numeral 2
  3. Numeral 3

  1. Primero
    • Segundo
      • Último

 Texto Fuente

- Sección 1
- Sección 2
- Sección 3

---

1. Numeral 1
2. Numeral 2
3. Numeral 3

---

1. Primero
    - Segundo
        - Último

Lista de Tareas

Lista de Tareas o Task List.

 Ejemplo

  • item 1
    • item A
    • item B Texto adicional
      • item a
      • item b

 Texto Fuente

- [X] item 1
    * [X] item A
    * [ ] item B
        Texto adicional
        + [x] item a
        + [ ] item b

Símbolos de Teclas

Se puede representar teclas y generar sus distintas combinaciones:

 Resumen

Por ejemplo el siguiente texto:

++ctrl+alt+delete++

++ctrl+a++

genera la siguiente representación:

CtrlAltDel

CtrlA

 Detalle de Códigos

Los códigos de las teclas disponibles son:

Código Resultado Código Resultado
++"0"++ 0 ++"I"++ I
++"1"++ 1 ++"J"++ J
++"2"++ 2 ++"K"++ K
++"3"++ 3 ++"L"++ L
++"4"++ 4 ++"M"++ M
++"5"++ 5 ++"N"++ N
++"6"++ 6 ++"O"++ O
++"7"++ 7 ++"P"++ P
++"8"++ 8 ++"Q"++ Q
++"9"++ 9 ++"R"++ R
++"A"++ A ++"S"++ S
++"B"++ B ++"T"++ T
++"C"++ C ++"U"++ U
++"D"++ D ++"V"++ V
++"E"++ E ++"W"++ W
++"F"++ F ++"X"++ X
++"G"++ G ++"Y"++ Y
++"H"++ H ++"Z"++ Z
++"Space"++ Space ++"Backspace"++ Backspace
++"Del"++ Del ++"Ins"++ Ins
++"Break"++ Break ++"Caps Lock"++ Caps Lock
++"Clear"++ Clear ++"Eject"++ Eject
++"Enter"++ Enter ++"Esc"++ Esc
++"Help"++ Help ++"Print Screen"++ Print Screen
++"Scroll Lock"++ Scroll Lock ++tab++ Tab
++arrow-up++ Up ++arrow-left++ Left
++arrow-down++ Down ++arrow-right++ Right
++page-up++ Page Up ++home++ Home
++page-down++ Page Down ++end++ End
++"Num 0"++ Num 0 ++"Num *"++ Num *
++"Num 1"++ Num 1 ++"Num Clear"++ Num Clear
++"Num 2"++ Num 2 ++"Num Del"++ Num Del
++"Num 3"++ Num 3 ++"Num ="++ Num =
++"Num 4"++ Num 4 ++"Num Lock"++ Num Lock
++"Num 5"++ Num 5 ++"Num -"++ Num -
++"Num 6"++ Num 6 ++"Num \+"++ Num +
++"Num 7"++ Num 7 ++"Num ."++ Num .
++"Num 8"++ Num 8 ++"Num /"++ Num /
++"Num 9"++ Num 9 ++"Num Enter"++ Num Enter
++"Alt"++ Alt ++"Meta"++ Meta
++"Cmd"++ Cmd ++"Option"++ Option
++"Ctrl"++ Ctrl ++"Right Alt"++ Right Alt
++"Fn"++ Fn ++"Right Ctrl"++ Right Ctrl
++"Left Alt"++ Left Alt ++"Right Shift"++ Right Shift
++"Left Ctrl"++ Left Ctrl ++"Right Win"++ Right Win
++"Left Shift"++ Left Shift ++"Shift"++ Shift
++"Left Win"++ Left Win ++"Win"++ Win
++"F1"++ F1 ++"F13"++ F13
++"F2"++ F2 ++"F14"++ F14
++"F3"++ F3 ++"F15"++ F15
++"F4"++ F4 ++"F16"++ F16
++"F5"++ F5 ++"F17"++ F17
++"F6"++ F6 ++"F18"++ F18
++"F7"++ F7 ++"F19"++ F19
++"F8"++ F8 ++"F20"++ F20
++"F9"++ F9 ++"F21"++ F21
++"F10"++ F10 ++"F22"++ F22
++"F11"++ F11 ++"F23"++ F23
++"F12"++ F12 ++"F24"++ F24
++"\\"++ \ ++">"++ >
++"\|"++ | ++"<"++ <
++"{"++ { ++"-"++ -
++"}"++ } ++"."++ .
++"["++ [ ++"\+"++ +
++"]"++ ] ++"?"++ ?
++":"++ : ++";"++ ;
++","++ , ++"'"++ '
++"\""++ " ++"/"++ /
++"="++ = ++"~"++ ~
++"!"++ ! ++"_"++ _
++"\"++| ++"\"++

Estilos CSS

El Dokumentador permite definir un estilo CSS en una sección del texto deseado.

 Ejemplo

Para permitir un mejor ajuste en los textos se permiten estilos CSS, su formato es:

Texto
{: #id_cualquiera .nombre_de_clase_css llave='valor' }

Ejemplos:

Texto con clase 1.

Texto con clase 2.

 Texto Fuente

Para permitir un mejor ajuste en los textos se permiten estilos __CSS__, su formato es:

```
Texto
{: #id_cualquiera .nombre_de_clase_css llave='valor' }
```

Ejemplos:

Texto con clase 1.
{: #IdPrueba .css_test }

Texto con clase 2.
{: #IdPrueba2 .css_test2}

Iconos Font Awesome  

Uso de Font Awesome 4 para el manejo de iconos en de los textos:

 Ejemplo

Se tienen 2 formas de para el manejo de fonts:

  1. Forma reducida :[(nombre del font) (clases extra)]::

fa-xs fa-lg fa-2x fa-3x fa-4x fa-5x

  1. Forma directa con HTML:

fa-xs fa-lg fa-2x fa-3x fa-4x fa-5x

Esta forma permite un manejo más avanzado de los fonts:

 Texto Fuente

Se tienen 2 formas de para el manejo de fonts:

1. Forma reducida `:[(nombre del font) (clases extra)]:`:

:fa-github-square:
:fa-user fa-fw texto-sombra-1a:
:fa-user fa-fw sombra-1b:
:fa-spinner fa-spin fa-2x fa-fw:

:fa-camera-retro fa-xs: fa-xs
:fa-camera-retro fa-lg: fa-lg
:fa-camera-retro fa-2x: fa-2x
:fa-camera-retro fa-3x: fa-3x
:fa-camera-retro fa-4x: fa-4x
:fa-camera-retro fa-5x: fa-5x

2. Forma directa con HTML:

<i class="fa fa-github-square"></i>
<i class="fa fa-user fa-fw texto-sombra-1a"></i>
<i class="fa fa-user fa-fw sombra-1a"></i>
<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>

<i class="fa fa-camera-retro fa-xs"></i> fa-xs
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Esta forma permite un manejo más avanzado de los fonts:

<span class="fa-stack fa-lg">
    <i class="fa fa-square-o fa-stack-2x" style="color:red"></i>
    <i class="fa fa-twitter fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x fa-inverse" style="color:cyan"></i>
</span>

Tablas

El manejo de tablas con Markdown es realmente fácil:

 Ejemplo

Sin centrar Izquierda Centrar Derecha
Celda 1 Celda 3 Celda 5 Celda 7
Celda 2 Celda 4 Celda 6 Celda 8
Celda 9 Celda 10 Celda 11 Celda 12

Adicionalmente al estándar Markdown, el Dokumentador agrega la funcionalidad de tablas dinámicas, esto con sólo anteponer al inicio de una tabla el siguiente token:

:table(nombre de la tabla, número de renglones, nombre de archivo exportar):

Ejemplo de una tabla dinámica:

Oficinas Servicios Empleados Apertura
Tokyo 21 02/06/2006
San Francisco 1 40 02/06/2006
San Francisco 2 14 02/06/2016
London 1 20 02/06/2006
London 2 10 02/06/2017
London 3 35 02/06/2018
New York 1 11 02/06/2009
New York 2 16 02/06/2011
New York 3 20 02/06/2014
Edinburgh 87 02/06/2010
México 1 32 02/06/2012
México 2 32 02/06/2017

 Texto Fuente

| Sin centrar  | Izquierda | Centrar | Derecha
| ----------- |:----------|:----------:| --------:
| Celda  1 | Celda  3 | Celda  5 | Celda  7
| Celda  2 | Celda  4 | Celda  6 | Celda  8
| Celda  9 | Celda  10 | Celda  11 | Celda  12

Adicionalmente al estándar _Markdown_, el __Dokumentador__ agrega la funcionalidad de tablas dinámicas, esto con sólo anteponer al inicio de una tabla el siguiente token:

`:table(nombre de la tabla, número de renglones, nombre de archivo exportar)`:

Ejemplo de una tabla dinámica:

:table(tabla1, 5):

Oficinas       | Servicios                | Empleados    | Apertura
:-------------- |:------------------------:|:------------:|:----------:
Tokyo           | :fa-table fa-fw :         :fa-windows fa-fw : |     21       |  02/06/2006
San Francisco 1 | :fa-thermometer-2 fa-fw : :fa-linux fa-fw : |     40       | 02/06/2006
San Francisco 2 | :fa-calculator fa-fw :    |     14       |  02/06/2016
London   1      | :fa-bluetooth fa-fw :     :fa-apple fa-fw : |     20       | 02/06/2006
London   2      | :fa-car fa-fw :           |     10       |  02/06/2017
London   3      | :fa-microchip fa-fw :     :fa-linux fa-fw : |     35       | 02/06/2018
New York 1      | :fa-bus fa-fw :           |     11       |  02/06/2009
New York 2      | :fa-check fa-fw :         |     16       |  02/06/2011
New York 3      | :fa-calendar fa-fw :      |     20       |  02/06/2014
Edinburgh       | :fa-photo fa-fw :         |     87       |  02/06/2010
México 1        | :fa-plug fa-fw :          |     32       |  02/06/2012
México 2        | :fa-folder fa-fw :        |     32       |  02/06/2017

Código

El Dokumentador nos permite el poder incrustar secciones de código resaltado de distintos lenguajes para un mejor entendimiento si necesidad de capturas de pantalla.

  • Código en linea:

 Ejemplo

Sección de código en PHP: $a = array("foo" => 0, "bar" => 1);

Otro ejemplo en Java: List<String> lst = new ArrayList<>();

 Texto Fuente

Sección de código en PHP:  `#!php-inline $a = array("foo" => 0, "bar" => 1);`

Otro ejemplo en Java:  `#!java-inline List<String> lst = new ArrayList<>();`

  • Código en bloques:

 Ejemplo

Python

import tensorflow as tf

Java

import org.java.String;
import org.java.List;

import foo.bar
import foo.bar2
import foo.bar
import boo.baz
import foo.bar.baz
import foo.bar.baz2

 Texto Fuente

Python

```python
import tensorflow as tf
```

Java

```java
import org.java.String;
import org.java.List;
```

---


```java linenums="1"
import foo.bar
import foo.bar2
```


```java linenums="1" hl_lines="2 3"
import foo.bar
import boo.baz
import foo.bar.baz
import foo.bar.baz2
```

Pestañas

Se permite el uso de controles de pestañas tab para un mejor entendimiento de la documentación, esta funcionalidad sólo se recomienda para HTML.

 Ejemplo

Ejemplo 1:

#!/bin/bash
STR="Hello World!"
echo $STR
#include
int main(void) {
printf("hello, world\n");
}
#include <iostream>
int main() {
std::cout << "Hello, world!\n"; return 0;
}

Ejemplo 2:

pubic static void oneTest();
public static void twoTest();

 Texto Fuente

Ejemplo 1:

```Bash linenums="1" tab=
#!/bin/bash
STR="Hello World!"
echo $STR
```

```C linenums="1" tab=
#include
int main(void) {
printf("hello, world\n");
}
```

```C++ linenums="1" tab=
#include <iostream>
int main() {
std::cout << "Hello, world!\n"; return 0;
}
```

Ejemplo 2:

```java tab="One"
pubic static void oneTest();
```

```java tab="Two"
public static void twoTest();
```

Diálogos

Otro tipo de controles para la documentación, son los diálogos, lamentablemente no todos los navegadores de HTML lo soportan.

 Ejemplo

Información

Contenido de Información.

Aceptar

Contenido de Aceptar.

Nota

Contenido de Nota

Más tipos de diálogo

Ejemplo

Contenido de Ejemplo

Resumen

Contenido de Resumen.

Warning

Contenido de Warning.

Falla

Contenido de Falla

Peligro

Contenido de Peligro

Configuración

Contenido de Configuración

Tips

Contenido de Tips

Defecto

Contenido de Defecto

Pregunta

Contenido de Pregunta

Cita

Contenido de Cita

 Texto Fuente

!!! info "Información"
    Contenido de Información.

??? success "Aceptar"
    Contenido de Aceptar.

!!! note "Nota"
    Contenido de Nota

??? summary "Más tipos de diálogo"

    !!! example "Ejemplo"
        Contenido de Ejemplo

    !!! summary "Resumen"
        Contenido de Resumen.

    ???+ warning classes
        Contenido de Warning.

    !!! failure "Falla"
        Contenido de Falla

    !!! danger "Peligro"
        Contenido de Peligro

    ??? settings "Configuración"
        Contenido de Configuración

    ???+ tip "Tips"
        Contenido de Tips

    ??? bug "Defecto"
        Contenido de Defecto

    ??? question "Pregunta"
        Contenido de Pregunta

    !!! quote "Cita"
        Contenido de Cita

Barras de Progreso

Hay controles de barras de progreso o Progress Bar para la documentación.

 Ejemplo

5%

25%

65%

85%

 Texto Fuente

[=5% "5%"]
[=25% "25%"]
[=65% "65%"]
[=85% "85%"]
[=45%]{: .thin}
[=95%]{: .thin}

Gráficos

El Dokumentador introduce el manejo de distintos tipos de gráficos en una forma sencilla basados en el componente de generación Chart.js.

Lineas  

Soporta Gráficos de Lineas

 Ejemplo

Gráfico 1

Temporal Image

Gráfico 2

Temporal Image

 Texto Fuente

Gráfico 1

\chart(id: 'chartLine1', width: '400', height: '400') {
    type: 'line',
    data: {
        labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul'],
        datasets: [{
            label: 'Linea',
            fill: false,
            backgroundColor: "rgba(220,20,20,0.2)",
            borderColor: 'rgba(220,20,20,0.8)',
            data: [65, 59, 80, 81, 56, 55, 40],
        }, {
            label: 'Punteada',
            fill: false,
            backgroundColor: 'rgba(120,120,220,0.2)',
            borderColor: 'rgba(020,120,255,0.8)',
            borderDash: [5, 5],
            data: [28, 48, 40, 19, 86, 27, 90],
        }, {
            label: 'Area',
            fill: true,
            backgroundColor: "rgba(0, 150, 136,0.2)",
            borderColor: "rgba(0, 150, 136,0.8)",
            data: [18, 78, 35, 40, 26, 60, 35],
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'Gráfica de Linea'
        },
        tooltips: {
            mode: 'index',
            intersect: false,
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Mes'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Valores'
                }
            }]
        }
    }
}\chart

Gráfico 2

\chart(id: 'chartLine2', width: '100%', height: '100%') {
    type: 'line',
    data: {
        labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul'],
        datasets: [{
            label: 'Muestra 1',
            backgroundColor: 'rgba(75, 192, 192, 0.5)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
            data: [-65, -29, 35, 81, 56, 15, -20],
        }, {
            label: 'Muestra 2',
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1,
            pointStyle: 'rectRot',
            pointRadius: 5,
            pointBorderColor: 'rgb(0, 0, 0)',
            data: [29,-15, -75, -18, -46, 5, 35],
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'Gráfica de Linea'
        },
        legend: {
            position: 'bottom',
            usePointStyle: true,
            labels: {
                usePointStyle: true,
            }
        },
        tooltips: {
            mode: 'index',
            intersect: false,
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Mes'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Valores'
                }
            }]
        }
    }
}\chart

Barras  

Soporte a Gráficos de Barras

 Ejemplo

Gráfico 1

Temporal Image

Gráfico 2

Temporal Image

 Texto Fuente

Gráfico 1

\chart(id: 'chartBar1', width: '400', height: '400') {
    type: 'bar',
    data: {
        labels: ['Rojo', 'Azul', 'Amarillo', 'Verde', 'Morado', 'Naranja'],
        datasets: [{
            label: '# Votos',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
}\chart

Gráfico 2

\chart(id: 'chartBar2', width: '400', height: '400') {
    type: 'bar',
    data: {
        labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio'],
        datasets: [{
            label: 'Muestra 1',
            data: [12, 19, 3, 5, 2, 3, 6],
            backgroundColor: 'rgba(255, 99, 132, 0.8)',
            borderColor: 'rgba(255, 99, 132, 1)',
        }, {
            label: 'Muestra 2',
            data: [3, 4, 6, 8, 12, 7, 2],
            backgroundColor: 'rgba(54, 162, 235, 1)',
            borderColor: 'rgba(54, 162, 235, 1)',
        }, {
            label: 'Muestra 3',
            data: [4, 6, 7, 2, 8, 6, 12],
            backgroundColor: 'rgba(75, 192, 192, 1)',
            borderColor: 'rgba(75, 192, 192, 1)',
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Gráfica de Barras Apiladas'
        },
        tooltips: {
            mode: 'index',
            intersect: false
        },
        responsive: true,
        legend: {
            position: 'bottom',
        },
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
}\chart

Pie  

También se incluye soporte a Gráficos Circulares o tipo Pie.

 Ejemplo

Gráfico 1

Temporal Image

Gráfico 2

Temporal Image

 Texto Fuente

Gráfico 1

\chart(id: 'chartPie1', width: '100%', height: '100%') {
    type: 'pie',
    data: {
        datasets: [{
            data: [12, 19, 23, 15, 32],
            backgroundColor: [
                'rgba(255, 99, 132, 0.8)',
                'rgba(255, 159, 64, 0.8)',
                'rgba(255, 206, 86, 0.8)',
                'rgba(75, 192, 192, 0.8)',
                'rgba(54, 162, 235, 0.8)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(54, 162, 235, 1)',
            ],
            label: 'Dataset 1'
        }],
        labels: [
            'Rojo',
            'Naranja',
            'Amarillo',
            'Verde',
            'Azul'
        ]
    },
    options: {
        responsive: true,
        legend: {
            position: 'left',
        },
        title: {
            display: true,
            text: 'Gráfica en Pie'
        },
    }
}\chart

Gráfico 2

\chart(id: 'chartPie2', width: '100%', height: '100%') {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [12, 19, 23, 15, 32],
            backgroundColor: [
                'rgba(255, 99, 132, 0.8)',
                'rgba(255, 159, 64, 0.8)',
                'rgba(255, 206, 86, 0.8)',
                'rgba(75, 192, 192, 0.8)',
                'rgba(54, 162, 235, 0.8)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(54, 162, 235, 1)',
            ],
            label: 'Dataset 1'
        }],
        labels: [
            'Rojo',
            'Naranja',
            'Amarillo',
            'Verde',
            'Azul'
        ]
    },
    options: {
        responsive: true,
        legend: {
            position: 'right',
        },
        title: {
            display: true,
            text: 'Gráfica de Dona'
        },
    }
}\chart

Otros  

Otros gráficos que soporta son Polar, Radar y Combinados.

 Ejemplo

Polar

Temporal Image

Radar

Temporal Image

Combinados

Temporal Image

 Texto Fuente

Polar

\chart(id: 'chartPolar1', width: '70%', height: '60%') {
    type: 'polarArea',
    data: {
        datasets: [{
            data: [12, 19, 23, 15, 32],
            backgroundColor: [
                'rgba(255, 99, 132, 0.5)',
                'rgba(255, 159, 64, 0.5)',
                'rgba(255, 206, 86, 0.5)',
                'rgba(75, 192, 192, 0.5)',
                'rgba(54, 162, 235, 0.5)',
            ],
            label: 'Dataset 1',
        }],
        labels: [
            'Rojo',
            'Naranja',
            'Amarillo',
            'Verde',
            'Azul'
        ]
    },
    options: {
        responsive: true,
        legend: {
            position: 'right',
        },
        title: {
            display: true,
            text: 'Gráfica Polar'
        },
        scale: {
            ticks: {
                beginAtZero: true
            },
            reverse: false
        },
        animation: {
            animateRotate: false,
            animateScale: true
        }
    }
}\chart


Radar

\chart(id: 'chartRadar1', width: '70%', height: '60%') {
    type: 'radar',
    data: {
        labels: [
            'Ene','Feb','Mar','Abr','May','Jun','Jul'
        ],
        datasets: [
            {
                label: 'Muestra 1',
                data: [65,59,90,81,56,55,40],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255,99,132, 0.8)',
                pointBackgroundColor: 'rgba(255,99,132,1)',
                pointBorderColor: '#fff',
                pointHoverBorderColor: 'rgba(255,99,132,1)',
                fill: true
            }, {
                label: 'Muestra 2',
                data: [28,48,40,19,96,27,100],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 0.8)',
                pointBackgroundColor: 'rgba(54, 162, 235,1)',
                pointBorderColor: '#fff',
                pointHoverBorderColor: 'rgba(54, 162, 235,1)',
                fill: true
            }
        ],
        pointStyle: 'crossRot',
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        spanGaps: false,
        elements: {
            line: {
                tension: 0,
                borderWidth: 3
            }
        },
        plugins: {
            filler: {
                propagate: false
            },
            'samples-filler-analyser': {
                target: 'chart-div-chartRadar1'
            }
        }
    }
}\chart

Combinados

\chart(id: 'chartCombo1', width: '100%', height: '100%') {
    type: 'bar',
    data: {
        labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio'],
        datasets: [{
            type: 'line',
            label: 'Muestra 1',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 2,
            fill: false,
            data: [8, -19, 3, 12, -2, 11, -8]
        }, {
            type: 'bar',
            label: 'Muestra 2',
            backgroundColor: 'rgba(255,99,132,1)',
            borderColor: 'white',
            borderWidth: 2,
            data: [4, 9, 12, 2, 5, 6, 17],
        }, {
            type: 'bar',
            label: 'Muestra 3',
            backgroundColor: 'rgba(75, 192, 192, 1)',
            data: [-14, -5, 8, 12, -3, 9, -4],
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'Gráfica Combinada'
        },
        tooltips: {
            mode: 'index',
            intersect: true
        },
    }
}\chart

Diagramas

El Dokumentador introduce el manejo de diagramas basados en Blockdiag .

Flujo

Soporte a Diagramas de Flujo  

 Ejemplo

Temporal Image

blockdiag In 1 B E D F 6 6 G 6 Send …

 Texto Fuente

blockdiag {
    A [shape = "flowchart.database", numbered = 1, label = "In"];
    B [shape = "cloud"];
    C [label="", style = dotted];
    D [shape = "actor"];
    E [shape = "diamond", color = cyan];
    F [shape = "note", textcolor=blue, fontsize=20];
    G [shape = "mail", numbered = 6,  stacked];
    C -> D [color = "red"];
    F -> G [folded, label='Send mail'];
    A -> B -> C <-> D;
    A -> E -> F -> G;
}

Secuencia

Soporte a Diagramas de Secuencia  

 Ejemplo