"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Diagrama-As-código: Crear documentación dinámica e interactiva para contenido visual

Diagrama-As-código: Crear documentación dinámica e interactiva para contenido visual

Publicado el 2025-01-26
Navegar:432

En este artículo, lo guiaré paso a paso para crear documentación visual dinámica e interactiva utilizando herramientas de diagrama de código. En lugar de imágenes estáticas, generaremos diagramas mediante programación, asegurando que siempre estén actualizadas y fáciles de mantener.

Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content


? Diagrama como código

diagrama como código es un enfoque que le permite crear diagramas a través del código en lugar de herramientas gráficas tradicionales. En lugar de construir diagramas manualmente, puede escribir código en un archivo de texto para definir la estructura, los componentes y las conexiones de sus diagramas.

Este código luego se traduce en imágenes gráficas, lo que facilita la integración y el documento en proyectos de software, donde es especialmente útil para crear y actualizar diagramas de arquitectura y flujo programáticamente.


¿Qué son los diagramas?

diagramas es una biblioteca de ? Con diagramas, puede definir fácilmente los componentes de infraestructura en la nube (como AWS, Azure y GCP), elementos de red, servicios de software y más, todos con solo unas pocas líneas de código.

? Beneficios del diagrama como código

    ?
  • representación de diagramas como código : cree y actualice diagramas directamente desde el código, asegurando la mantenibilidad en proyectos ágiles.
  • ?
  • Documentación automatizada : Genere visuales desde el código, manteniendo diagramas alineados con la arquitectura actual.
  • ?
  • Cambiar control : Track Diagram Modificaciones con el tiempo.
  • ?
  • claridad mejorada : mejorar la comprensión de los sistemas complejos con imágenes claras y compartidas.
  • ✏️
  • Customizable : representar infraestructuras en la nube, flujos de trabajo o tuberías de datos con imágenes flexibles y personalizadas.

Tutorial

? Instalación de la biblioteca

actualmente estaba usando la versión '0.23.4' para este tutorial.


! Pip Instale diagramas == '0.23.4'
!pip install diagrams=='0.23.4'

? Diagramas: nodos

La biblioteca le permite crear diagramas arquitectónicas programáticamente, usando nodos para representar diferentes componentes y servicios de infraestructura.


Tipos de nodos

Los nodos en diagramas representan componentes de diferentes proveedores de servicios en la nube, así como de otros elementos arquitectónicos. Estas son las principales categorías de nodos disponibles:

    ☁️
  • Cloud Providers : AWS (Amazon Web Services), Azure, GCP, IBM Cloud, Alibaba Cloud, Oracle Cloud, DigitalOcean, entre otros.
  • ?
  • en la instalación : representa la infraestructura ubicada físicamente en las instalaciones de la empresa.
  • ?
  • kubernetes (k8s) : sistema de orquestación de contenedores para automatizar la implementación, escala y administración de aplicaciones contenedores (representados por la rueda de un barco, simbolizando el control y la navegación).
  • ? ️
  • openStack : plataforma de software de código abierto para crear y administrar nubes públicas y privadas.
  • ?
  • genérico : nodos genéricos que pueden representar cualquier componente no cubierto específicamente por nodos específicos del proveedor (herramientas cruzadas, representando diferentes herramientas en una categoría).
  • ☁️
  • SaaS (software como servicio) : representa aplicaciones entregadas como un servicio a través de Internet, como copo de nieve, servicios de chat (Slack, equipos, telegrama, entre otros), seguridad (por ejemplo, Okta ), o redes sociales (tope y nube para el concepto SaaS).
  • ?
  • Custom : permite a los usuarios personalizar sus diagramas usando iconos PNG almacenados en una carpeta específica. Esto es útil para representar componentes de infraestructura no cubiertos por los nodos predeterminados (herramientas personalizadas cruzadas).

? Lenguajes de programación

la biblioteca

diagramas le permite usar diferentes nodos para representar varios lenguajes de programación. Estos nodos son útiles para indicar en sus diagramas si alguna parte de su arquitectura utiliza scripts o componentes desarrollados en un lenguaje de programación específico.

a continuación, mostraremos todos los idiomas disponibles en la biblioteca. Si falta algún idioma, puede agregar nodos personalizados cargando el logotipo correspondiente en una carpeta específica.


# Crea el objeto Diagrama con diagramas.diagram ("lenguajes de programación", show = false, filename = "lenguajes"): # Obtenga todos los idiomas disponibles en esta biblioteca Idiomas = [Artículo para el artículo en Dir (diagramas.programming.language) if item [0]! = '_'] # Divide la representación en dos líneas mid_index = len (idiomas) // 2 First_line = Languages ​​[: Mid_index] Second_line = lenguajes [mid_index:] # Agregar nodos en la primera fila Prev_node = ninguno Para el lenguaje en First_Line: current_node = eval (f "diagramss.programming.language. {lenguaje} (lenguaje)") Si prev_node no es ninguno: Prev_node >> Current_node Prev_node = Current_Node # Agregar nodos en la segunda fila Prev_node = ninguno Para el lenguaje en Second_Line: current_node = eval (f "diagramss.programming.language. {lenguaje} (lenguaje)") Si prev_node no es ninguno: Prev_node >> Current_node Prev_node = Current_Node Imagen ("Languages.png")
!pip install diagrams=='0.23.4'

Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content


☁️ AWS (Amazon Web Services)

podemos usar nodos de Amazon, que se organizan en varias categorías, como:

  • Analytics and Business : awsalytics, aws.business
  • Compute and Storage : aws.compute, aws.storage, aws.cost
  • base de datos y devTools : aws.database, aws.devtools
  • Integration and Management : aws.integration, aws.management
  • Aprendizaje automático y móvil : aws.ml, aws.mobile
  • networking y seguridad : aws.network, aws.security
  • otros : aws.blockchain, aws.enduser, aws.engagation, aws.game, aws.general, aws.iot, aws.media, aws.migration, aws.quantum, awshrobotics, aws. satélite
A continuación, representaremos una de estas categorías para visualizar los nodos disponibles dentro de AWS.Database.


de diagramas de importación diagrama desde la imagen de importación de explay. diagramas de importación. Database como AWS_DATABASE database_components = [] Para el artículo en Dir (AWS_DATABASE): if elemento [0]! = '_': Si no es ninguno (comp.startswith (elemento) o elemento. database_components.append (elemento) con diagrama ("base de datos AWS", show = false, filename = "aws_database"): mid_index = len (database_components) // 2 First_line = database_components [: mid_index] segundo_line = database_components [Mid_index:] Prev_node = ninguno para item_database en First_Line: current_node = eval (f "aws_database. {item_database} (item_database)") Si prev_node no es ninguno: Prev_node >> Current_node Prev_node = Current_Node Prev_node = ninguno para item_database en Second_Line: current_node = eval (f "aws_database. {item_database} (item_database)") Si prev_node no es ninguno: Prev_node >> Current_node Prev_node = Current_Node Imagen ("AWS_DATABASE.PNG")
!pip install diagrams=='0.23.4'

Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content


☁️ Caso de uso

ahora, creemos un plan simple que corresponde a importar un conjunto de datos y capacitar un modelo de aprendizaje automático en

aws .

de diagramas de importación diagrama, clúster de diagramas.aws.storage import s3 de diagramas.aws.analítica Importación de pegamento, Athena diagramas de importación.aws.ml como ML De diagramas.aws. Interpratación Importación de pasos de diagrams.aws.compute import lambda de diagrams.aws.network import apigateway desde la imagen de importación de explay. con diagrama ("tuberías de procesamiento de datos de AWS", show = false): lambda_raw = lambda ('obtener datos sin procesar') # Cubos de S3 con clúster ("Data Lake"): s3_rawdata = s3 ("raw_data") s3_stage = s3 ("staging_data") s3_data_capture = s3 ("data_capture") Athena = Athena ("Athena") s3_rawdata >> Athena s3_stage >> Athena s3_data_capture >> Athena # Funciones de pasos Tubería con clúster ("tuberías de procesamiento de datos"): step_functions = stepfunctions ("tubería") # Trabajos de pegamento en funciones de paso con clúster ("Jobs de pegamento"): data_quality = Glue ("Job_data_Quality") transform = Glue ("Job_data_transform") DataSet_Preparation = Glue ("Job_dataset_model") # Definir flujos de funciones de paso step_functions >> data_Quality >> transform >> dataSet_Preparation s3_rawdata >> data_Quality # Sagemaker para capacitación y implementación de modelos con clúster ("implementación del modelo sagemaker"): Train_model = Ml.SageMakerTrainingJob ("Job_train_model") eval_model = ml.sagemakergroundtruth ("Job_evaluate_model") Endpoint = ml.sagemakermodel ("model_enpoint") # API Gateway y Lambda para el punto final api_gateway = apigiGaway ("api_gateway") lambda_fn = lambda ("invoke_endpoint") # Conexión lambda_raw >> s3_rawdata S3_stage >> Train_model >> Eval_model >> punto final punto final >> lambda_fn >> api_gateway punto final >> s3_data_capture DataSet_Preparation >> Train_model Imagen ("AWS_DATA_Processing_Pipeline.png")
!pip install diagrams=='0.23.4'

Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content


Repositorio

a continuación se encuentran el enlace a todo el código, si lo encuentra útil, puede dejar una estrella ⭐️ y seguirme para recibir notificaciones de nuevos artículos. Esto me ayudará a crecer en la comunidad tecnológica y crear más contenido.

r0mymendez / diagrama como código Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content

Un tutorial sobre cómo crear un proyecto de documentación utilizando la metodología de 'DOC As Diagram'

Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content


? Diagram-as-código: creación de documentación dinámica e interactiva para el contenido visual

diagrama como código es un enfoque que le permite crear diagramas a través del código en lugar de herramientas gráficas tradicionales. En lugar de construir diagramas manualmente, puede escribir código en un archivo de texto para definir la estructura, los componentes y las conexiones de sus diagramas.

Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content

Este código luego se traduce en imágenes gráficas, lo que facilita la integración y el documento en proyectos de software, donde es especialmente útil para crear y actualizar diagramas de arquitectura y flujo programáticamente.

¿Qué son los diagramas?

diagramas es una biblioteca de ? Con diagramas, puede definir fácilmente los componentes de infraestructura en la nube (como AWS, Azure y GCP), elementos de red, servicios de software y más, todos con solo unas pocas líneas de código.

? Beneficios del diagrama-as-código

? ...

Ver en github


Si desea ver cómo implementar un sitio de documentación utilizando esta tubería, puede leer el artículo que publiqué en el siguiente enlace

? Referencias

    diagramas:
  1. https://diagrams.mingrammer.com/
Declaración de liberación Este artículo se reproduce en: https://dev.to/r0mymendez/diagram-as-creating-dynamic-an -nteractive-documentation-visual-content-2 p93?
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3