"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 다이어그램-코드 : 시각적 컨텐츠에 대한 동적 및 대화식 문서 작성

다이어그램-코드 : 시각적 컨텐츠에 대한 동적 및 대화식 문서 작성

2025-01-26에 게시됨
검색:299

이 기사에서는 다이어그램-코드 도구를 사용하여 역동적이고 대화식 시각적 문서를 작성하기 위해 단계별로 안내합니다. 정적 이미지 대신 프로그래밍 방식으로 다이어그램을 생성하여 항상 최신 상태이고 유지 관리가 쉽도록합니다.

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


? 코드로서의 다이어그램

코드로서의 다이어그램 은 기존 그래픽 도구 대신 코드를 통해 다이어그램을 만들 수있는 접근법입니다. 다이어그램을 수동으로 빌드하는 대신 텍스트 파일에 코드를 작성하여 다이어그램의 구조, 구성 요소 및 연결을 정의 할 수 있습니다.

이 코드는 그래픽 이미지로 변환되므로 소프트웨어 프로젝트에서 쉽게 통합하고 문서화 할 수 있습니다. 여기서 아키텍처 및 플로우 다이어그램을 프로그래밍 방식으로 작성하고 업데이트하는 데 특히 유용합니다.


다이어그램이란 무엇입니까?

다이어그램 는 코드 접근 방식으로 다이어그램을 구현하는 ? Python Library 는 코드를 통해 건축 인프라 다이어그램 및 기타 유형의 다이어그램을 만들 수 있습니다. 다이어그램을 사용하면 클라우드 인프라 구성 요소 (예 : AWS, Azure 및 GCP), 네트워크 요소, 소프트웨어 서비스 등을 쉽게 정의 할 수 있습니다.

? 다이어그램-코드의 이점

    ?
  • 코드로서의 다이어그램 표현 : 코드에서 직접 다이어그램을 생성하고 업데이트하여 민첩한 프로젝트의 유지 관리 가능성을 보장합니다.
  • ?
  • ? 컨트롤 변경 : 시간이 지남에 따라 다이어그램 수정을 추적합니다.
  • ? 향상된 선명도 : 명확하고 공유 된 시각적으로 복잡한 시스템에 대한 이해를 향상시킵니다.
  • ]️ 사용자 정의 가능한 : 클라우드 인프라, 워크 플로 또는 유연하고 맞춤형 비주얼이있는 데이터 파이프 라인을 나타냅니다.
  • 지도 시간
? 도서관 설치

나는 현재이 튜토리얼에 '0.23.4'버전을 사용하고있다.

! PIP 설치 다이어그램 == '0.23.4'


? 다이어그램 : 노드
!pip install diagrams=='0.23.4'
라이브러리를 사용하면 노드를 사용하여 다양한 인프라 구성 요소 및 서비스를 나타내는 건축 다이어그램을 프로그래밍 방식으로 만들 수 있습니다.

노드 유형

다이어그램의 노드는 다른 클라우드 서비스 제공 업체와 다른 아키텍처 요소의 구성 요소를 나타냅니다. 사용 가능한 노드의 주요 범주는 다음과 같습니다.

]️

클라우드 제공 업체

: AWS (Amazon Web Services), Azure, GCP, IBM Cloud, Alibaba Cloud, Oracle Cloud, DigitalOcean 등.
  • ? 온-프레미스 : 회사의 구내에 물리적으로 위치한 인프라를 나타냅니다.
  • ? kubernetes (k8s) : 컨테이너화 된 응용 프로그램의 배치, 스케일링 및 관리를 자동화하는 컨테이너 오케스트레이션 시스템 (선박 휠으로 표시, 제어 및 내비게이션을 상징)
  • ? ️ OpenStack : 공개 및 개인 구름 생성 및 관리를위한 오픈 소스 소프트웨어 플랫폼.
  • ? generic : 제공자 별 노드 (하나의 범주에서 다른 도구를 나타내는 교차 도구)로 구체적으로 다루지 않는 구성 요소를 나타낼 수있는 일반 노드.
  • ]️ saaS (서비스로 소프트웨어) : 스노우 플레이크, 채팅 서비스 (슬랙, 팀, 전보 등), 보안 (예 : OKTA 등)과 같은 인터넷을 통해 서비스로 제공되는 응용 프로그램을 나타냅니다. ) 또는 소셜 네트워크 (SaaS 개념을위한 전화 및 클라우드를 넘어서).
  • ? custom : 사용자는 특정 폴더에 저장된 PNG 아이콘을 사용하여 다이어그램을 사용자 정의 할 수 있습니다. 이는 기본 노드 (Crossed-Out Custom Tools)로 덮여 있지 않은 인프라 구성 요소를 나타내는 데 유용합니다.
  • ? 프로그래밍 언어

다이어그램

라이브러리를 사용하면 다양한 노드를 사용하여 다양한 프로그래밍 언어를 나타낼 수 있습니다. 이 노드는 특정 프로그래밍 언어로 개발 된 스크립트 또는 구성 요소를 사용하는 경우 다이어그램을 표시하는 데 도움이됩니다.

아래, 우리는 도서관에서 사용 가능한 모든 언어를 보여줄 것입니다. 언어가 없으면 해당 로고를 특정 폴더에 업로드하여 사용자 정의 노드를 추가 할 수 있습니다.

# 다이어그램 객체를 만듭니다 diagrams.diagram ( "프로그래밍 언어", show = false, filename = "언어") : #이 라이브러리에서 모든 언어를 사용할 수 있습니다 언어 = [DIR의 항목에 대한 항목 (다이어그램. 프로그램. # 표현을 두 줄로 나눕니다 mid_index = len (언어) // 2 First_line = 언어 [: mid_index] second_line = 언어 [mid_index :] # 첫 번째 행에 노드를 추가합니다 prev_node = 없음 First_Line의 언어 : current_node = eval (F "다이어그램. 프로그램. prev_node가 없다면 : prev_node >> current_node prev_node = current_node # 두 번째 행에 노드를 추가합니다 prev_node = 없음 Second_line의 언어 : current_node = eval (F "다이어그램. 프로그램. prev_node가 없다면 : prev_node >> current_node prev_node = current_node image ( "languages.png")


!pip install diagrams=='0.23.4'

☁️ AWS (Amazon Web Services) Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content

우리는 Amazon 노드를 사용할 수 있습니다. Amazon 노드는 다음과 같은 여러 범주로 구성됩니다.

분석 및 비즈니스

: aws.analytics, aws.business
  • Compute and Storage : aws.compute, aws.storage, aws.cost
  • 데이터베이스 및 DevTools : aws.database, aws.devtools
  • 통합 및 관리 : aws.integration, aws.management
  • 머신 러닝 및 모바일 : aws.ml, aws.mobile
  • 네트워킹 및 보안 : aws.network, aws.security
  • 기타 : aws.blockchain, aws.enduser, aws.engagement, aws.game, aws.general, aws.iot, aws.media, aws.migration, awantum, aws.robotics, aws. 위성
  • 다음으로, 우리는이 카테고리 중 하나를 대표하여 AWS.Database 내에서 사용 가능한 노드를 시각화합니다.
다이어그램 가져 오기 다이어그램에서 IPYTHON에서 DISPLAY 가져 오기 이미지 Diagrams.aws.database aws_database로 가져옵니다 database_components = [] dir (aws_database)의 항목의 경우 : If item [0]! = '_'인 경우 : Database_components의 comp for comp에 대한 (comp.startswith (item) 또는 item.startswith (comp)가없는 경우 : database_components.append (항목) 다이어그램 ( "AWS 데이터베이스", show = false, filename = "aws_database") : mid_index = len (database_components) // 2 First_line = Database_components [: mid_index] second_line = database_components [mid_index :] prev_node = 없음 First_line의 item_database의 경우 : current_node = eval (f "aws_database. {item_database} (item_database)") prev_node가 없다면 : prev_node >> current_node prev_node = current_node prev_node = 없음 Second_line의 item_database의 경우 : current_node = eval (f "aws_database. {item_database} (item_database)") prev_node가 없다면 : prev_node >> current_node prev_node = current_node 이미지 ( "aws_database.png")


!pip install diagrams=='0.23.4'

☁️ 사용 사례 Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content

이제 데이터 세트 가져 오기에 해당하는 간단한 청사진을 만들고
aws

.

다이어그램 가져 오기 다이어그램, 클러스터 Diagrams.aws.Storage 가져 오기 S3 Diagrams.aws.analytics import Glue, Athena에서 ML로 다이어그램을 가져옵니다 다이어그램에서 aws.integration 가져 오기 단계 다이어그램에서 aws.compute import lambda Diagrams.aws.network import apigateway에서 IPYTHON에서 DISPLAY 가져 오기 이미지 다이어그램을 사용하여 ( "AWS 데이터 처리 파이프 라인", show = false) : lambda_raw = lambda ( '원시 데이터 받기') # 버킷 DE S3 클러스터 ( "데이터 레이크") : : s3_rawdata = s3 ( "raw_data") s3_stage = s3 ( "staging_data") s3_data_capture = s3 ( "data_capture") 아테나 = 아테나 ( "아테나") S3_RAWDATA >> 아테나 S3_STAGE >> 아테나 s3_data_capture >> athena # 단계 기능 파이프 라인 클러스터를 사용하여 ( "데이터 처리 파이프 라인") : step_funtions = stepfactions ( "파이프 라인") # 단계 함수에서 작업을 접착합니다 클러스터 ( "접착제 작업") : : data_quality = 접착제 ( "job_data_quality") 변환 = 접착제 ( "job_data_transform") DataSet_preparation = 접착제 ( "job_dataset_model") # 정의 단계 함수 흐름 step_Functions >> data_quality >> transform >> dataSet_preparation S3_RAWDATA >> data_quality # 모델 교육 및 배포를위한 Sagemaker 클러스터 ( "Sagemaker 모델 배포") : : Train_Model = ml.SagemakerTrainingJob ( "job_train_model") eval_model = ml.sagemakergroundtruth ( "job_evaluate_model") endpoint = ml.sagemakermodel ( "model_enpoint") # 엔드 포인트의 API 게이트웨이 및 람다 api_gateway = apigateway ( "api_gateway") lambda_fn = lambda ( "invoke_endpoint") # 연결 lambda_raw >> s3_rawdata S3_STAGE >> TRAIN_MODEL >> EVAT_MODEL >> 엔드 포인트 종말점 >> lambda_fn >> api_gateway 엔드 포인트 >> s3_data_capture DataSet_preparation >> TRAIN_MODEL 이미지 ( "aws_data_processing_pipeline.png")

from diagrams import Diagram, Cluster
from diagrams.aws.storage import S3
from diagrams.aws.analytics import Glue, Athena
import diagrams.aws.ml as ml
from diagrams.aws.integration import StepFunctions
from diagrams.aws.compute import Lambda
from diagrams.aws.network import APIGateway
from IPython.display import Image

with Diagram("AWS Data Processing Pipeline", show=False):

    lambda_raw = Lambda('Get Raw Data')
    # Buckets de S3
    with Cluster("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

    #  Step Functions Pipeline
    with Cluster("Data Processing Pipeline"):
        step_functions = StepFunctions("Pipeline")

        # Glue Jobs in Step Functions
        with Cluster("Glue Jobs"):
            data_quality = Glue("job_data_quality")
            transform = Glue("job_data_transform")
            dataset_preparation = Glue("job_dataset_model")

        # Define Step Functions Flows
        step_functions >> data_quality >> transform >> dataset_preparation
        s3_rawData >> data_quality

    # SageMaker for model training and deployment
    with Cluster("SageMaker Model Deployment"):
        train_model = ml.SagemakerTrainingJob("job_train_model")
        eval_model = ml.SagemakerGroundTruth("job_evaluate_model")
        endpoint = ml.SagemakerModel("model_enpoint")

    # API Gateway and Lambda for the endpoint
    api_gateway = APIGateway("API_gateway")
    lambda_fn = Lambda("invoke_endpoint")

    # Connection
    lambda_raw >> s3_rawData
    s3_stage >> train_model >> eval_model >> endpoint
    endpoint >> lambda_fn >> api_gateway
    endpoint >> s3_data_capture
    dataset_preparation >> train_model


Image("aws_data_processing_pipeline.png")

저장소

Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content 아래는 모든 코드에 대한 링크입니다. 유용하다고 생각되면 별을 남겨두고 새 기사에 대한 알림을받을 수 있습니다. 이것은 기술 커뮤니티에서 성장하고 더 많은 콘텐츠를 만드는 데 도움이 될 것입니다.


r0mymendez / 다이어그램-코드

'doc as diagram'방법론을 사용하여 문서 프로젝트를 만드는 방법에 대한 자습서

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

? 다이어그램 코드 : 시각적 컨텐츠에 대한 동적 및 대화식 문서 작성 Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content


코드로서의 다이어그램

은 기존 그래픽 도구 대신 코드를 통해 다이어그램을 만들 수있는 접근법입니다. 다이어그램을 수동으로 빌드하는 대신 텍스트 파일에 코드를 작성하여 다이어그램의 구조, 구성 요소 및 연결을 정의 할 수 있습니다.

이 코드는 그래픽 이미지로 변환되므로 소프트웨어 프로젝트에서 쉽게 통합하고 문서화 할 수 있습니다. 여기서 아키텍처 및 플로우 다이어그램을 프로그래밍 방식으로 작성하고 업데이트하는 데 특히 유용합니다.

Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content 다이어그램이란 무엇입니까?

다이어그램

는 코드 접근 방식으로 다이어그램을 구현하는 ? Python Library

는 코드를 통해 건축 인프라 다이어그램 및 기타 유형의 다이어그램을 만들 수 있습니다. 다이어그램을 사용하면 클라우드 인프라 구성 요소 (예 : AWS, Azure 및 GCP), 네트워크 요소, 소프트웨어 서비스 등을 쉽게 정의 할 수 있습니다.

? 다이어그램-코드의 이점

?…

github에서보기


이 파이프 라인을 사용하여 문서 사이트를 구현하는 방법을보고 싶다면 다음 링크에 게시 한 기사를 읽을 수 있습니다


? 참조

다이어그램 :
https://diagrams.mingrammer.com/

릴리스 선언문 이 기사는 다음과 같습니다
최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3