"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > आरेख-जैसा-कोड: दृश्य सामग्री के लिए गतिशील और इंटरैक्टिव दस्तावेज़ीकरण बनाना

आरेख-जैसा-कोड: दृश्य सामग्री के लिए गतिशील और इंटरैक्टिव दस्तावेज़ीकरण बनाना

2025-01-26 को प्रकाशित
ब्राउज़ करें:352

इस लेख में, मैं आपको डायग्राम-ए-कोड टूल का उपयोग करके गतिशील और इंटरैक्टिव विज़ुअल दस्तावेज़ बनाने के लिए चरण दर चरण मार्गदर्शन करूंगा। स्थिर छवियों के बजाय, हम प्रोग्रामेटिक रूप से आरेख तैयार करेंगे, यह सुनिश्चित करते हुए कि वे हमेशा अद्यतित रहें और बनाए रखने में आसान हों।

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


? कोड के रूप में आरेख

कोड के रूप में आरेख एक दृष्टिकोण है जो आपको पारंपरिक ग्राफिक टूल के बजाय कोड के माध्यम से आरेख बनाने की अनुमति देता है। मैन्युअल रूप से आरेख बनाने के बजाय, आप अपने आरेखों की संरचना, घटकों और कनेक्शन को परिभाषित करने के लिए एक टेक्स्ट फ़ाइल में कोड लिख सकते हैं।

फिर इस कोड को ग्राफिकल छवियों में अनुवादित किया जाता है, जिससे सॉफ्टवेयर परियोजनाओं में एकीकृत करना और दस्तावेजीकरण करना आसान हो जाता है, जहां यह प्रोग्रामेटिक रूप से वास्तुशिल्प और प्रवाह आरेख बनाने और अद्यतन करने के लिए विशेष रूप से उपयोगी होता है।


आरेख क्या है?

Diagrams एक ?Python लाइब्रेरी है जो डायग्राम को कोड दृष्टिकोण के रूप में कार्यान्वित करती है, जो आपको कोड के माध्यम से आर्किटेक्चरल इंफ्रास्ट्रक्चर आरेख और अन्य प्रकार के आरेख बनाने में सक्षम बनाती है। आरेखों के साथ, आप कोड की कुछ पंक्तियों के साथ क्लाउड इंफ्रास्ट्रक्चर घटकों (जैसे एडब्ल्यूएस, एज़्योर और जीसीपी), नेटवर्क तत्वों, सॉफ्टवेयर सेवाओं और बहुत कुछ को आसानी से परिभाषित कर सकते हैं।

? कोड के रूप में आरेख के लाभ

  • ? कोड के रूप में आरेखों का प्रतिनिधित्व: त्वरित परियोजनाओं में रखरखाव सुनिश्चित करते हुए, कोड से सीधे आरेख बनाएं और अपडेट करें।
  • ? स्वचालित दस्तावेज़ीकरण: आरेखों को वर्तमान वास्तुकला के साथ संरेखित रखते हुए, कोड से दृश्य उत्पन्न करें।
  • ? नियंत्रण बदलें: समय के साथ आरेख संशोधनों को ट्रैक करें।
  • ? उन्नत स्पष्टता: स्पष्ट, साझा दृश्यों के साथ जटिल प्रणालियों की समझ में सुधार करें।
  • ✏️ अनुकूलन योग्य: लचीले और अनुकूलित दृश्यों के साथ क्लाउड इंफ्रास्ट्रक्चर, वर्कफ़्लो या डेटा पाइपलाइन का प्रतिनिधित्व करते हैं।

ट्यूटोरियल

? पुस्तकालय स्थापना

मैं वर्तमान में इस ट्यूटोरियल के लिए संस्करण '0.23.4' का उपयोग कर रहा था।

!pip install diagrams=='0.23.4'

? आरेख: नोड्स

पुस्तकालय आपको विभिन्न बुनियादी ढांचे के घटकों और सेवाओं का प्रतिनिधित्व करने के लिए नोड्स का उपयोग करके प्रोग्रामेटिक रूप से वास्तुशिल्प आरेख बनाने की अनुमति देता है।


नोड प्रकार

आरेख में नोड्स विभिन्न क्लाउड सेवा प्रदाताओं के घटकों के साथ-साथ अन्य वास्तुशिल्प तत्वों का प्रतिनिधित्व करते हैं। यहां उपलब्ध नोड्स की मुख्य श्रेणियां हैं:

  • ☁️ क्लाउड प्रदाता: AWS (अमेज़ॅन वेब सर्विसेज), Azure, GCP, IBM क्लाउड, अलीबाबा क्लाउड, Oracle क्लाउड, DigitalOcean, अन्य।
  • ? ऑन-प्रिमाइस: कंपनी के परिसर में भौतिक रूप से स्थित बुनियादी ढांचे का प्रतिनिधित्व करता है।
  • ? कुबेरनेट्स (K8S): कंटेनरीकृत अनुप्रयोगों की तैनाती, स्केलिंग और प्रबंधन को स्वचालित करने के लिए कंटेनर ऑर्केस्ट्रेशन सिस्टम (जहाज के पहिये द्वारा दर्शाया गया, नियंत्रण और नेविगेशन का प्रतीक)।
  • ?️ ओपनस्टैक: सार्वजनिक और निजी क्लाउड बनाने और प्रबंधित करने के लिए ओपन-सोर्स सॉफ़्टवेयर प्लेटफ़ॉर्म।
  • ? जेनेरिक: जेनेरिक नोड्स जो किसी भी घटक का प्रतिनिधित्व कर सकते हैं जो विशेष रूप से प्रदाता-विशिष्ट नोड्स (क्रॉस किए गए टूल, एक श्रेणी में विभिन्न टूल का प्रतिनिधित्व करते हैं) द्वारा कवर नहीं किया जाता है।
  • ☁️ SaaS (एक सेवा के रूप में सॉफ्टवेयर): इंटरनेट पर एक सेवा के रूप में वितरित अनुप्रयोगों का प्रतिनिधित्व करता है, जैसे स्नोफ्लेक, चैट सेवाएं (स्लैक, टीम्स, टेलीग्राम, अन्य), सुरक्षा (जैसे, ओक्टा) ), या सामाजिक नेटवर्क (सास अवधारणा के लिए फ़ोन और क्लाउड को हटा दिया गया)।
  • ? कस्टम: उपयोगकर्ताओं को एक विशिष्ट फ़ोल्डर में संग्रहीत पीएनजी आइकन का उपयोग करके अपने आरेखों को अनुकूलित करने की अनुमति देता है। यह डिफ़ॉल्ट नोड्स (क्रॉस-आउट कस्टम टूल) द्वारा कवर नहीं किए गए बुनियादी ढांचे के घटकों का प्रतिनिधित्व करने के लिए उपयोगी है।

? प्रोग्रामिंग भाषा

आरेख लाइब्रेरी आपको विभिन्न प्रोग्रामिंग भाषाओं का प्रतिनिधित्व करने के लिए विभिन्न नोड्स का उपयोग करने की अनुमति देती है। यदि आपके आर्किटेक्चर का कोई हिस्सा किसी विशिष्ट प्रोग्रामिंग भाषा में विकसित स्क्रिप्ट या घटकों का उपयोग करता है तो ये नोड्स आपके आरेखों में इंगित करने में सहायक होते हैं।

नीचे, हम लाइब्रेरी में सभी उपलब्ध भाषाओं को प्रदर्शित करेंगे। यदि कोई भाषा गायब है, तो आप संबंधित लोगो को एक विशिष्ट फ़ोल्डर में अपलोड करके कस्टम नोड्स जोड़ सकते हैं।

# Create the diagram object
with diagrams.Diagram("Programming Languages", show=False, filename="languages"):
    # Get all the languages available in this library
    languages = [item for item in dir(diagrams.programming.language) if item[0] != '_']

    # Divide the representation in two lines
    mid_index = len(languages) // 2
    first_line = languages[:mid_index]
    second_line = languages[mid_index:]

    # Add nodes in the first row
    prev_node = None

    for language in first_line:
        current_node = eval(f"diagrams.programming.language.{language}(language)")
        if prev_node is not None:
            prev_node >> current_node
        prev_node = current_node

    # Add nodes in the second row
    prev_node = None

    for language in second_line:
        current_node = eval(f"diagrams.programming.language.{language}(language)")
        if prev_node is not None:
            prev_node >> current_node
        prev_node = current_node

Image("languages.png")

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


☁️ AWS (अमेज़ॅन वेब सेवाएँ)

हम अमेज़ॅन नोड्स का उपयोग कर सकते हैं, जो कई श्रेणियों में व्यवस्थित हैं, जैसे:

  • एनालिटिक्स और बिजनेस: aws.analytics, aws.business
  • कंप्यूट और स्टोरेज: aws.compute, aws.storage, aws.cost
  • डेटाबेस और डेवटूल्स: aws.database, aws.devtools
  • एकीकरण और प्रबंधन: aws.integration, aws.management
  • मशीन लर्निंग और मोबाइल: aws.ml, aws.mobile
  • नेटवर्किंग और सुरक्षा: aws.network, aws.security
  • अन्य: aws.ब्लॉकचेन, aws.enduser, aws.engagement, aws.game, aws.general, aws.iot, aws.media, aws.migration, aws.quantum, aws.robotics, aws. उपग्रह

अगला, हम aws.database के भीतर उपलब्ध नोड्स की कल्पना करने के लिए इन श्रेणियों में से एक का प्रतिनिधित्व करेंगे।

from diagrams import Diagram
from IPython.display import Image
import diagrams.aws.database as aws_database


database_components = []
for item in dir(aws_database):
    if item[0] != '_':
        if not any(comp.startswith(item) or item.startswith(comp) for comp in database_components):
            database_components.append(item)


with Diagram("AWS Database", 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 = None
    for item_database in first_line:
        current_node = eval(f"aws_database.{item_database}(item_database)")
        if prev_node is not None:
            prev_node >> current_node
        prev_node = current_node


    prev_node = None
    for item_database in second_line:
        current_node = eval(f"aws_database.{item_database}(item_database)")
        if prev_node is not None:
            prev_node >> current_node
        prev_node = current_node

Image("aws_database.png")

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


☁️ केस का उपयोग करें

अब, आइए एक सरल खाका बनाएं जो एक डेटासेट आयात करने और AWS पर एक मशीन लर्निंग मॉडल को प्रशिक्षित करने से मेल खाता है।

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


कोष

नीचे सभी कोड के लिंक हैं, यदि आपको यह उपयोगी लगता है, तो आप एक स्टार ⭐️ छोड़ सकते हैं और नए लेखों की सूचनाएं प्राप्त करने के लिए मुझे फ़ॉलो कर सकते हैं। इससे मुझे तकनीकी समुदाय में आगे बढ़ने और अधिक सामग्री बनाने में मदद मिलेगी।

Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content r0mymendez / आरेख-जैसा-कोड

'आरेख के रूप में दस्तावेज़' पद्धति का उपयोग करके दस्तावेज़ीकरण प्रोजेक्ट कैसे बनाएं, इस पर एक ट्यूटोरियल

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


? कोड के रूप में आरेख: दृश्य सामग्री के लिए गतिशील और इंटरैक्टिव दस्तावेज़ीकरण बनाना

कोड के रूप में आरेख एक दृष्टिकोण है जो आपको पारंपरिक ग्राफिक टूल के बजाय कोड के माध्यम से आरेख बनाने की अनुमति देता है। मैन्युअल रूप से आरेख बनाने के बजाय, आप अपने आरेखों की संरचना, घटकों और कनेक्शन को परिभाषित करने के लिए एक टेक्स्ट फ़ाइल में कोड लिख सकते हैं।

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

फिर इस कोड को ग्राफिकल छवियों में अनुवादित किया जाता है, जिससे सॉफ्टवेयर परियोजनाओं में एकीकृत करना और दस्तावेजीकरण करना आसान हो जाता है, जहां यह प्रोग्रामेटिक रूप से वास्तुशिल्प और प्रवाह आरेख बनाने और अद्यतन करने के लिए विशेष रूप से उपयोगी होता है।

आरेख क्या है?

Diagrams एक ?Python लाइब्रेरी है जो डायग्राम को कोड दृष्टिकोण के रूप में कार्यान्वित करती है, जो आपको कोड के माध्यम से आर्किटेक्चरल इंफ्रास्ट्रक्चर आरेख और अन्य प्रकार के आरेख बनाने में सक्षम बनाती है। आरेखों के साथ, आप कोड की कुछ पंक्तियों के साथ क्लाउड इंफ्रास्ट्रक्चर घटकों (जैसे एडब्ल्यूएस, एज़्योर और जीसीपी), नेटवर्क तत्वों, सॉफ्टवेयर सेवाओं और बहुत कुछ को आसानी से परिभाषित कर सकते हैं।

? कोड के रूप में आरेख के लाभ

  • ?…


GitHub पर देखें


यदि आप यह देखना चाहते हैं कि इस पाइपलाइन का उपयोग करके एक दस्तावेज़ीकरण साइट को कैसे कार्यान्वित किया जाए तो आप निम्नलिखित लिंक में मेरे द्वारा प्रकाशित लेख पढ़ सकते हैं


? संदर्भ

  1. आरेख: https://diagrams.mingrammer.com/
विज्ञप्ति वक्तव्य यह आलेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/r0mymendez/diagram-as-code-creating-dynamic-and-interactive-documentation-for-visual-content-2p93?1 यदि कोई उल्लंघन है, तो कृपया स्टडी_गोलंग से संपर्क करें @163.com हटाएं
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3