Instruments that deal with diagrams as code, similar to PlantUML, are invaluable for speaking
\n complicated system habits. Their text-based format simplifies versioning, automation, and
\n evolving architectural diagrams alongside code. In my work explaining distributed
\n methods, PlantUML’s sequence diagrams are significantly helpful for capturing interactions
\n exactly.<\/p>\n
Nevertheless, I usually wished for an extension to stroll by means of these diagrams step-by-step,
\n revealing interactions sequentially fairly than displaying the whole complicated stream at
\n as soon as\u2014like a slideshow for execution paths. This need displays a standard developer
\n state of affairs: wanting personalised extensions or inner instruments for their very own wants.<\/p>\n
But, extending established instruments like PlantUML usually includes vital preliminary
\n setup\u2014parsing hooks, construct scripts, viewer code, packaging\u2014sufficient \u201cplumbing\u201d to
\n deter speedy prototyping. The preliminary funding required to start can suppress good
\n concepts.<\/p>\n
That is the place Massive Language Fashions (LLMs) show helpful. They’ll deal with boilerplate
\n duties, liberating builders to give attention to design and core logic. This text particulars how I
\n used an LLM to construct PlantUMLSteps<\/code>, a small extension including step-wise \n playback to PlantUML sequence diagrams. The objective is not simply the software itself, however \n illustrating the method how syntax design, parsing, SVG era, construct automation, \n and an HTML viewer had been iteratively developed by means of a dialog with an LLM, \n turning tedious duties into manageable steps.<\/p>\n
\nDiagram as code – A PlantUML primer<\/h2>\nEarlier than diving into the event course of, let’s briefly introduce PlantUML
\n                for individuals who may be unfamiliar. PlantUML is an open-source software that enables
\n                you to create UML diagrams from a easy text-based description language. It
\n                helps
\n                numerous diagram varieties together with sequence, class, exercise, part, and state
\n                diagrams.<\/p>\n
The facility of PlantUML lies in its capability to model management diagrams
\n                as plain textual content, combine with documentation methods, and automate diagram
\n                era inside growth pipelines. That is significantly precious for
\n                technical documentation that should evolve alongside code.<\/p>\n
This is a easy instance of a sequence diagram in PlantUML syntax:<\/p>\n
@startuml\n\nconceal footbox\n\nactor Person\nparticipant System\nparticipant Database\n\nPerson -> System: Login Request\nSystem --> Person: Login Type\n\nPerson -> System: Submit Credentials\nSystem -> Database: Confirm Credentials\nDatabase --> System: Validation Consequence\nSystem --> Person: Authentication Consequence\n\nPerson -> System: Request Dashboard\nSystem -> Database: Fetch Person Information\nDatabase --> System: Person Information\nSystem --> Person: Dashboard View\n@enduml <\/pre>\nWhen processed by PlantUML, this textual content generates a visible sequence diagram displaying the
\n            interplay between parts.<\/p>\n
<\/p>\n<\/div>\n                The code-like nature of PlantUML makes
\n                it simple to be taught and use, particularly for builders who’re already comfy
\n                with text-based instruments.<\/p>\n
This simplicity is what makes PlantUML an ideal candidate for extension. With the
\n                proper tooling, we will improve its capabilities whereas sustaining its text-based
\n                workflow.<\/p>\n
\n                Our objective for this venture is to create a software which might divide the
\n                sequence diagram into steps and generate a step-by-step view of the diagram.
\n                So for the above diagram, we should always be capable of view login, authentication and
\n                dashboard
\n                steps one after the other.\n            <\/p>\n<\/section>\n
\nStep 2: Constructing the Parser Logic (and Debugging)<\/h2>\n\n\u201cNow we have to parse the plantuml information and separate out step. Every time we
\n                    encounter a step marker, we create a step object and maintain including the following strains
\n                    to it till we encounter one other step marker or finish of file. In case we
\n                    encounter one other step counter, we create new step object, it ought to have all
\n                    the consists of, actors and individuals from the earlier step. It must also
\n                    have all of the content material of the earlier step, until the step metadata has
\n                    ‘newPage’ attribute. If there are not any step markers encountered, which is the case
\n                    the place we’ve information with out steps, it ought to create a default step. Create a
\n                    StepParser to parse given puml information and create checklist of steps.\u201d<\/p>\n<\/div>\n
Claude generated the preliminary code for a StepParser class and a Step mannequin class to
\n                deal with parsing PlantUML information with step markers. The preliminary implementation had some
\n                logical points:<\/p>\n
\nIncorrect dealing with of step content material inheritance when newPage attribute was false<\/li>\n
Improper dealing with of declarations (actors, individuals) showing earlier than the
\n                    first step marker<\/li>\n
Points with making a default step for information with out markers<\/li>\n<\/ul>\nThe Cursor editor was working in Agent mode, so after working assessments and figuring out
\n                these points by means of the failure messages, Claude offered a corrected model that
\n                correctly dealt with:<\/p>\n
\nContent material collected earlier than step one marker<\/li>\n
Inheritance of content material from the instantly previous step<\/li>\n
World monitoring of declarations throughout steps<\/li>\n
Correct creation of a default step for information with out markers<\/li>\n<\/ul>\nWith these corrections, the parser efficiently handed all assessments.<\/p>\n
 The following step was to generate a gradle job. <\/p>\n
\n                    We want gradle job which might course of puml information in src\/diagrams and its sub
\n                folders. For every file it ought to create a listing with the title of the file the place
\n                it generates legitimate puml file for every step. It could actually generate that by simply including
\n                @startuml at the beginning and @enduml on the finish of the step content material.<\/p>\n
\nI will show you how to create a Gradle job to course of PlantUML information and generate
\n                step-by-step diagrams. First, let’s create the duty in
\n                construct.gradle:<\/p>\n
\/\/ Course of every .puml file within the enter listing and its subdirectories\nfileTree(inputDir).embrace('**\/*.puml').every { pumlFile ->\n    def relativePath = inputDir.toPath().relativize(pumlFile.toPath()).toString()\n    def fileName = pumlFile.title.exchange('.puml', '')\n    def stepOutputDir = new File(outputDir, fileName)\n    \n    if (!stepOutputDir.exists()) {\n        stepOutputDir.mkdirs()\n    }\n    \n    \/\/ Run the generator for this file\n    javaexec {\n        classpath = sourceSets.primary.runtimeClasspath\n        mainClass = 'com.instance.StepDiagramGenerator'\n        args = [pumlFile.absolutePath, stepOutputDir.absolutePath]\n    }<\/pre>\n<\/div>\n Claude additionally helped producing a easy plantuml sequence diagram to check the gradle
\n                job. The identical one which we used originally of the article.\n            <\/p>\n
\n            The gradle job wanted a category PlantUMLGenerator which
\n            can generate SVGs for every step.
\n            Cursor within the Agent mode generated the code for the category.\n            <\/p>\n
 It then ran the construct to confirm the duty. <\/p>\n
\nLet's run a check to verify our implementation works: cd \/Customers\/unmeshjoshi\/work\/plantumlsequence && .\/gradlew clear construct\n                \nActivity :generateStepDiagrams\nGenerated step diagram: \/Customers\/unmeshjoshi\/work\/plantumlsteps\/construct\/generated-diagrams\/user-authentication\/step-01-step-1-user-login.puml\nGenerated step diagram: \/Customers\/unmeshjoshi\/work\/plantumlsteps\/construct\/generated-diagrams\/user-authentication\/step-02-step-2-authentication.puml\nGenerated step diagram: \/Customers\/unmeshjoshi\/work\/plantumlsteps\/construct\/generated-diagrams\/user-authentication\/step-03-step-3-dashboard.puml\nGenerated step stream abstract: \/Customers\/unmeshjoshi\/work\/plantumlsteps\/construct\/generated-diagrams\/user-authentication\/abstract.puml\n\n        BUILD SUCCESSFUL in 543ms\n        3 actionable duties: 3 executed\n\n<\/pre>\n<\/div>\n<\/section>\n\nStep 3: Producing HTML Viewer for Step Sequence<\/h2>\n The following step was to generate a easy HTML viewer that can be utilized to view the step
\n                sequence. <\/p>\n
\n                        Now we have to generate a HTML viewer for the step information to be proven one after the other.
\n                    The HTML viewer can have a view space the place we present the svg picture generated for every
\n                    step with the step title within the metadata for that step. We will have subsequent and former
\n                    buttons to point out subsequent and former step picture.\n                <\/p>\n
\n                    I will show you how to create an HTML viewer for the step diagrams. We’ll must: Generate
\n                    SVG information from the PlantUML information Create an HTML viewer with navigation controls
\n                    Replace the Gradle job to generate each PlantUML and SVG information, together with the HTML
\n                    viewer First, let’s create a easy HTML template for the viewer:
\n                    ….<\/p>\n
\n                The agent mode found out a number of points with the template however auto-fixed it by
\n                working some corrective actions.\n            <\/p>\n
 This setup allowed us to shortly generate step diagrams from a single PlantUML file,
\n                and look at them in a step-by-step method. So the above diagram might be seen as a
\n                sequence of following steps:<\/p>\n
<\/p>\n<\/div>\n<\/p>\n<\/div>\n<\/p>\n<\/div>\n<\/section>\n\nThe Code is the Supply of Reality<\/h2>\nThe place to go from right here? <\/p>\n
Whereas the prompts and the LLM assistant (on this case, interacting in an agent-like
\n                mode, using fashions like Claude Sonnet) offered a remarkably efficient approach to
\n                generate a working first model of PlantUMLSteps<\/code>, it is essential to
\n                acknowledge the character of this generated output.<\/p>\n
\nPrompts aren’t Deterministic:<\/b> The prompts utilized in our dialog had been
\n                    efficient for this interplay, however they can’t be handled as the last word
\n                    ‘supply of reality’. The identical prompts given to a unique mannequin, and even the identical
\n                    mannequin at a later date, aren’t assured to supply the very same output due
\n                    to the inherent variability in LLM era. <\/li>\n
Code Requires Administration:<\/b> The generated code is the supply of reality for
\n                    the software’s performance. As such, it must be handled like another
\n                    software program artifact – checked into model management, reviewed, examined, and
\n                    maintained.<\/li>\n
Evaluate for Habitability:<\/b> It is important to revisit the LLM-generated code
\n                    after the preliminary creation part. Is it ‘liveable’? That’s, is it moderately
\n                    simple to learn, perceive, and modify by a human developer? Whereas the LLM helped
\n                    overcome preliminary hurdles and boilerplate, making certain the long-term maintainability
\n                    and readability of the codebase usually requires human evaluation and potential
\n                    refactoring. The objective is code that not solely works however can be developed
\n                    successfully over time.<\/li>\n<\/ul>\n\n                Prompting in pure language (like English) to generate code works properly within the
\n                early phases of growth\u2014while you’re exploring concepts, scaffolding performance,
\n                or getting aware of a brand new software or framework. However as your system begins to take
\n                form, the boundaries of imprecise or broad prompts grow to be obvious. At this stage, what’s
\n                wanted isn’t extra code era, however conceptual modeling\u2014utilizing the constructs of
\n                your programming language or expertise stack to precisely signify the area.
\n                This stage wants deeper considering to construct abstractions, and an alignment between
\n                code construction and area ideas\u2014one thing solely achievable by means of considerate
\n                design, not simply prompting. If prompt-based code era with out
\n                evaluation known as \u201cvibe coding,\u201d then the extra disciplined strategy might be
\n                known as \u201cAI-assisted structured coding.\u201d.\n            <\/p>\n<\/section>\n
\nPast Code Technology: The Developer Perception in Refactoring<\/h2>\n\n                The following step was to refactor the code to make it extra readable and maintainable.\n            <\/p>\n
Initially, the parse methodology was a protracted, monolithic perform that dealt with all the things
\n                from
\n                detecting step markers to managing declarations and content material. The code was tough
\n                to
\n                perceive and keep.\n            <\/p>\n
\n                The total code is obtainable in
\n                  this preliminary commit on GitHub<\/a>.\n            <\/p>\n
\n                The `StepParser.java` parse methodology wants refactoring. It ought to signify ideas
\n                used within the requirement or area ideas and comply with customary clear code practices
\n                with intentional methodology names and code that reads like a DSL.\n            <\/p>\n
This preliminary request was open-ended, indicating that the developer acknowledged the
\n                want for enchancment however was on the lookout for steerage on how one can strategy it.
\n                The LLM responded with a complete refactoring that launched a number of new
\n                lessons and strategies:\n            <\/p>\n
\n- Launched `PlantUmlDocument` to signify the doc being parsed\n- Smaller, extra targeted strategies with intention-revealing names\n- Higher encapsulation of associated behaviors\n- Extra expressive variable and methodology names\n\n\n    \/**\n     * Represents a PlantUML doc being parsed, managing state throughout parsing\n     *\/\n    non-public class PlantUmlDocument {\n        non-public ultimate Listing steps = new ArrayList<>();\n        non-public ultimate Listing declarations = new ArrayList<>();\n        non-public ultimate Listing contentBeforeFirstStep = new ArrayList<>();\n        non-public Step currentStep = null;\n        non-public boolean hasStepMarkers = false;\n        \n        public void beginNewStep(StepMetadata metadata) {\n            hasStepMarkers = true;\n            \n            \/\/ Save the present step if it exists\n            if (currentStep != null) {\n                steps.add(currentStep);\n            }\n            \n            \/\/ Create a brand new step\n            currentStep = new Step(metadata.getName(), metadata.isNewPage(), metadata.getAttributes());\n            \n            \/\/ Add all declarations to the brand new step\n            currentStep.addAllDeclarations(declarations);\n            \n            \/\/ If this is not a brand new web page and we've earlier steps, copy all content material from earlier steps\n            if (!metadata.isNewPage() && !steps.isEmpty()) {\n                carryOverPreviousStepsContent();\n            }\n        }\n        \n        non-public void carryOverPreviousStepsContent() {\n            for (Step previousStep : steps) {\n                for (String contentLine : previousStep.getContent()) {\n                    currentStep.addContent(contentLine);\n                }\n            }\n        }\n        \n        public void addDeclaration(String line) {\n            declarations.add(line);\n            \n            if (currentStep != null) {\n                currentStep.addDeclaration(line);\n            } else {\n                contentBeforeFirstStep.add(line);\n            }\n        }\n        \n        public void addContentLine(String line) {\n            if (currentStep != null) {\n                currentStep.addContent(line);\n            } else if (!line.trim().isEmpty()) {\n                contentBeforeFirstStep.add(line);\n            }\n        }\n        \n        public void finalizeDocument() {\n            \/\/ Add the final step if it exists and hasn't been added but\n            if (currentStep != null) {\n                steps.add(currentStep);\n            }\n        }\n<\/string><\/string><\/step><\/pre>\n<\/div>\n\n                The total code is obtainable in
\n                  this commit on GitHub<\/a>.\n            <\/p>\n
\n                The `contentBeforeFirstStep` in `PlantUmlDocument.java` is used just for creating
\n                default step when there are not any step markers?
\n                So we will presumably
\n                do two go processing the place we first verify if there are step markers.. if there
\n                are.. we do step-based processing. Or else we simply create a default step and add all
\n                declarations and content material. That may take away the necessity to have `contentBeforeFirstStep`
\n                We will additionally possibily title PlantUmlDocument as `ParsedPumlFile` which represents
\n                the parsed puml file.\n            <\/p>\n
\n                The LLM carried out this suggestion with a two-pass strategy. It additionally renamed the
\n                 PlantUmlDocument as ParsedPumlFile.
\n                 The total code is obtainable in
\n                  this commit on GitHub<\/a>.\n            <\/p>\n
\n                `ParsedPumlFile` might be higher represented as builder sample.
\n                `StepBuilder` generally is a builder for `Step` objects.\n            <\/p>\n
\n                This perception demonstrated the developer’s capability to acknowledge design patterns,
\n                noting that the refactored class adopted the Builder sample.\n            <\/p>\n
 The ultimate refactoring represents a big enchancment over the unique code: <\/p>\n
class StepBuilder {\n    non-public ultimate Listing steps = new ArrayList<>();\n    non-public ultimate Listing globalDeclarations = new ArrayList<>();\n    non-public Step currentStep = null;\n    \n    public void startNewStep(StepMetadata metadata) {\n        if (currentStep != null) {\n            steps.add(currentStep);\n        }\n        \n        currentStep = new Step(metadata);\n        currentStep.addAllDeclarations(globalDeclarations);\n        \n        if (!metadata.isNewPage() && !steps.isEmpty()) {\n            \/\/ Copy content material from the earlier step\n            Step previousStep = steps.get(steps.dimension() - 1);\n            for (String contentLine : previousStep.getContent()) {\n                currentStep.addContent(contentLine);\n            }\n        }\n    }\n    \n    public void addDeclaration(String declaration) {\n        globalDeclarations.add(declaration);\n        \n        if (currentStep != null) {\n            currentStep.addDeclaration(declaration);\n        }\n    }\n    \n    public void addContent(String content material) {\n        \/\/ If no step has been began but, create a default step\n        if (currentStep == null) {\n            StepMetadata metadata = new StepMetadata(\"Default Step\", false, new HashMap<>());\n            startNewStep(metadata);\n        }\n        \n        currentStep.addContent(content material);\n    }\n    \n    public Listing construct() {\n        if (currentStep != null) {\n            steps.add(currentStep);\n        }\n        \n        return new ArrayList<>(steps);\n    }\n} \n<\/step><\/string><\/step><\/pre>\n\n                The total code is obtainable in
\n                  this commit on GitHub<\/a>.\n            <\/p>\n
\n                There are extra enhancements attainable,
\n                however I’ve included a number of to display the character of collaboration between LLMs
\n                and builders.\n            <\/p>\n<\/section>\n
\nConclusion<\/h2>\n Every a part of this extension\u2014remark syntax, Java parsing logic, HTML viewer, and
\n                    Gradle wiring\u2014began with a targeted LLM immediate. Some elements required some professional
\n                    developer steerage to LLM, however the important thing profit was with the ability to discover and
\n                    validate concepts with out getting slowed down in boilerplate. LLMs are significantly
\n                    useful when you’ve a design in thoughts however aren’t getting began due to
\n                    the efforts wanted for establishing the scaffolding to attempt it out. They can assist
\n                    you generate working glue code, combine libraries, and generate small
\n                    UIs\u2014leaving you to give attention to whether or not the concept itself works.\n                <\/p>\n
\n                    After the preliminary working model, it was essential to have a developer to information
\n                    the LLM to enhance the code, to make it extra maintainable. It was vital
\n                    for builders to:\n                <\/p>\n
\nAsk insightful questions<\/li>\n
Problem proposed implementations<\/li>\n
Counsel various approaches<\/li>\n
Apply software program design ideas<\/li>\n<\/ul>\nThis collaboration between the developer and the LLM is essential to constructing
\n                        maintainable and scalable methods. The LLM can assist generate working code,
\n                        however the developer is the one who could make it extra readable, maintainable and
\n                        scalable.\n                    <\/p>\n<\/section>\n
\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"Instruments that deal with diagrams as code, similar to PlantUML, are invaluable for speaking complicated system habits. Their text-based format simplifies versioning, automation, and evolving architectural diagrams alongside code. In my work explaining distributed methods, PlantUML’s sequence diagrams are significantly helpful for capturing interactions exactly. Nevertheless, I usually wished for an extension to stroll by […]<\/p>\n","protected":false},"author":2,"featured_media":2516,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[475,2451,1112,2452],"class_list":["post-2514","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-building","tag-custom","tag-llms","tag-tooling"],"_links":{"self":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/2514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2514"}],"version-history":[{"count":1,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/2514\/revisions"}],"predecessor-version":[{"id":2515,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/2514\/revisions\/2515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/media\/2516"}],"wp:attachment":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}