[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"doc-seo-657535-105":3,"detail-sidebar-cat-0-en-105":80,"doc-detail-657535-en":130},{"code":4,"msg":5,"data":6},0,"ok",{"site_id":7,"language":8,"slug":9,"title":10,"keywords":11,"description":12,"schema_data":13,"social_meta":73,"head_meta":75,"extra_data":77,"updated_unix":79},105,"en","hylimo-hybrid-live-synchronized-modular-diagramming-editor-as-ide-extension-for-technical-and-scientific-publications","HyLiMo - Hybrid Live-Synchronized Modular Diagramming Editor as IDE Extension - for Technical and Scientific Publications","","Creating suitable diagrams for technical and scientific publications is challenging and time-consuming due to the need for precise manual layout. Existing tools either rely on textual DSLs with auto-layout that often fails to meet publication quality, or provide graphical editing that is efficient for layout but slow for large diagrams. HyLiMo combines both via hybrid live synchronization, editing a rendered diagram while storing layout and style in a DSL code. It is diagram-type independent, supports UML class diagrams, and is implemented as a web app and IDE extension using LSP; results show fast and precise diagramming.",{"@graph":14,"@context":72},[15,34,55],{"@type":16,"itemListElement":17},"BreadcrumbList",[18,23,27,31],{"item":19,"name":20,"@type":21,"position":22},"https://docshare.wps.com","Home","ListItem",1,{"item":24,"name":25,"@type":21,"position":26},"https://docshare.wps.com/document/","Document",2,{"item":28,"name":29,"@type":21,"position":30},"https://docshare.wps.com/document/technology/","Technology",3,{"item":32,"name":10,"@type":21,"position":33},"https://docshare.wps.com/document/hylimo-hybrid-live-synchronized-modular-diagramming-editor-as-ide-extension-for-technical-and-scientific-publications/657535/",4,{"url":32,"name":10,"@type":35,"image":36,"author":41,"headline":10,"publisher":44,"fileFormat":47,"inLanguage":8,"description":12,"dateModified":48,"datePublished":49,"encodingFormat":47,"isAccessibleForFree":50,"interactionStatistic":51},"DigitalDocument",{"url":37,"@type":38,"width":39,"height":40},"https://docshare.wps.com/thumbnails/hylimo-hybrid-live-synchronized-modular-diagramming-editor-as-ide-extension-for-technical-and-scientific-publications/657535.png","ImageObject",300,407,{"name":42,"@type":43},"Jake","Person",{"url":19,"name":45,"@type":46},"DocShare","Organization","application/pdf","2026-10-28","2026-10-26",true,{"@type":52,"interactionType":53,"userInteractionCount":26},"InteractionCounter",{"@type":54},"ViewAction",{"@type":56,"mainEntity":57},"FAQPage",[58,64,68],{"name":59,"@type":60,"acceptedAnswer":61},"What problem does HyLiMo address in technical and scientific diagram creation?","Question",{"text":62,"@type":63},"It targets the time-consuming and precision-heavy process of producing publication-quality diagrams, where layout and style strongly affect clarity and space efficiency.","Answer",{"name":65,"@type":60,"acceptedAnswer":66},"How does HyLiMo combine textual DSL and graphical editing?",{"text":67,"@type":63},"Diagrams are created in an internal textual DSL and kept live synchronized with an interactive graphical editor, so changes to layout and style are reflected while the DSL remains the source of truth.",{"name":69,"@type":60,"acceptedAnswer":70},"What are the benefits and intended scope of HyLiMo?",{"text":71,"@type":63},"HyLiMo aims to enable fast and precise diagramming by avoiding slow manual layout work for large diagrams, while still supporting straightforward customization and storing those details for version control.","https://schema.org",{"og:url":32,"og:type":74,"og:title":10,"og:site_name":45,"og:description":12},"article",{"robots":76,"canonical":32},"index,follow",{"doc_id":78,"site_id":7},657535,1793073739,{"code":4,"msg":81,"data":82},"success",[83,87,91,95,100,104,109,114,119,122,126],{"id":22,"doc_module":4,"doc_module_name":25,"category_name":84,"show_sort_weight":85,"slug":86},"Story & Novel",90,"story-novel",{"id":26,"doc_module":4,"doc_module_name":25,"category_name":88,"show_sort_weight":89,"slug":90},"Literature",80,"literature",{"id":33,"doc_module":4,"doc_module_name":25,"category_name":92,"show_sort_weight":93,"slug":94},"Exam",70,"exam",{"id":96,"doc_module":4,"doc_module_name":25,"category_name":97,"show_sort_weight":98,"slug":99},5,"Comic",60,"comic",{"id":101,"doc_module":4,"doc_module_name":25,"category_name":29,"show_sort_weight":102,"slug":103},6,50,"technology",{"id":105,"doc_module":4,"doc_module_name":25,"category_name":106,"show_sort_weight":107,"slug":108},7,"Healthcare",40,"healthcare",{"id":110,"doc_module":4,"doc_module_name":25,"category_name":111,"show_sort_weight":112,"slug":113},8,"Research & Report",30,"research-report",{"id":115,"doc_module":4,"doc_module_name":25,"category_name":116,"show_sort_weight":117,"slug":118},9,"Religion & Spirituality",20,"religion-spirituality",{"id":117,"doc_module":4,"doc_module_name":25,"category_name":120,"show_sort_weight":117,"slug":121},"World Cup","world-cup",{"id":123,"doc_module":4,"doc_module_name":25,"category_name":124,"show_sort_weight":123,"slug":125},10,"Lifestyle","lifestyle",{"id":127,"doc_module":4,"doc_module_name":25,"category_name":128,"show_sort_weight":96,"slug":129},19,"General","general",{"code":4,"msg":81,"data":131},{"doc_id":78,"user_id":132,"nickname":42,"user_avatar":133,"doc_module":4,"category_id":101,"category_name":29,"doc_title":10,"doc_description":12,"doc_content":134,"file_id":135,"file_url":136,"file_type":137,"file_size":138,"view_count":26,"is_deleted":4,"is_public":22,"is_downloadable":22,"audit_status":22,"page_count":101,"language":139,"language_code":8,"site_id":7,"html_lang":8,"table_of_contents":140,"faqs":141,"seo_title":142,"seo_description":12,"update_tm":143,"read_time":144},962084928904,"https://ap-avatar.wpscdn.com/davatar_155a257f0dc6eb9ab79c44ca47cae57d","HyLiMo: A Hybrid Live-Synchronized Modular Diagramming Editor as IDE Extension for Technical and Scientific Publications  \nNiklas Krieger  \n[niklas.krieger@iste.uni-stuttgart.de](niklas.krieger@iste.uni-stuttgart.de)[ ](niklas.krieger@iste.uni-stuttgart.de)Institute of Software Engineering Stuttgart, Germany  \nSandro Speth  \n[sandro.speth@iste.uni-stuttgart.de](sandro.speth@iste.uni-stuttgart.de)[ ](sandro.speth@iste.uni-stuttgart.de)Institute of Software Engineering Stuttgart, Germany  \nSteffen Becker  \n[steffen.becker@iste.uni-stuttgart.de](steffen.becker@iste.uni-stuttgart.de)[ ](steffen.becker@iste.uni-stuttgart.de)Institute of Software Engineering Stuttgart, Germany  \narXiv :2403 . 13711v1 [ cs . SE] 20 Mar 2024  \nABSTRACT  \nCreating suitable diagrams for technical and scientific publications is challenging and time-consuming, as manual control over the layout is required to communicate information effectively. Existing diagramming tools usually allow modeling the diagrams via a textual domain-specific language (DSL) that can be rendered and auto-layouted or via a graphical editor. While auto-layout is fast, the results are often not satisfying for most publications. However, graphical editors are time-consuming to create large diagrams. The blended or hybrid modeling concept enables creating diagrams efficiently using a DSL and editing the rendered diagram via the graphical editor for fine-tuning. However, hybrid modeling editors are limited to individual diagram types and do not save the layout and style information in the textual description. Therefore, we propose HyLiMo, a hybrid live-synchronized modular diagramming editor. In HyLiMo, diagrams are created using an internal DSL and live synchronized with an interactive graphical editor for the rendered diagram, allowing a straightforward layout and style change, which is stored in the DSL code. HyLiMo is independent of specific diagram types, but we offer specific functionality for UML class diagrams. Using the language server protocol, we implement it as a web app and IDE extension. The results of our user study indicate that such an approach enables fast and precise diagramming.  \nCCS CONCEPTS  \n• Software and its engineering → Domain specific languages; Designing software; Unified Modeling Language (UML); Integrated and visual development environments.  \nKEYWORDS  \nHybrid Diagramming, Domain-specific Language, IDE Extension, Class Diagram  \nACM Reference Format:  \nNiklas Krieger, Sandro Speth, and Steffen Becker. 2024. HyLiMo: A Hybrid Live-Synchronized Modular Diagramming Editor as IDE Extension for Technical and Scientific Publications. In 2024 First IDE Workshop (IDE’24), April 20, 2024, Lisbon, Portugal. ACM, New York, NY, USA, 6 pages. [https://doi.org/10.1145/3643796.3648458](https://doi.org/10.1145/3643796.3648458)  \nPermission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than the author(s) must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission [and/or a fee. Request permissions from permissions@acm.org](and/or a fee. Request permissions from permissions@acm.org).  \nIDE ’24, April 20, 2024, Lisbon, Portugal  \n© 2024 Copyright held by the owner/author(s) . Publication rights licensed to ACM. ACM ISBN 979-8-4007-0580-9/24/04  \n[https://doi.org/10.1145/3643796.3648458](https://doi.org/10.1145/3643796.3648458)  \n1 INTRODUCTION  \nDiagrams such as UML class diagrams are central to information transfer for many publications, e.g., tech documentation, blog articles, and research papers. In such use cases, the diagrams often require a precise layout to be easily understandable a","cbCaitkxCVgKnjWv","https://ap.wps.com/l/cbCaitkxCVgKnjWv","pdf",1047674,"English","# Abstract\n# Introduction\n## Motivation and challenges of diagram creation\n## Existing approaches and their limitations\n# Proposed solution: HyLiMo","[{\"question\":\"What problem does HyLiMo address in technical and scientific diagram creation?\",\"answer\":\"It targets the time-consuming and precision-heavy process of producing publication-quality diagrams, where layout and style strongly affect clarity and space efficiency.\"},{\"question\":\"How does HyLiMo combine textual DSL and graphical editing?\",\"answer\":\"Diagrams are created in an internal textual DSL and kept live synchronized with an interactive graphical editor, so changes to layout and style are reflected while the DSL remains the source of truth.\"},{\"question\":\"What are the benefits and intended scope of HyLiMo?\",\"answer\":\"HyLiMo aims to enable fast and precise diagramming by avoiding slow manual layout work for large diagrams, while still supporting straightforward customization and storing those details for version control.\"}]","HyLiMo - Hybrid Live-Synchronized Modular Diagramming Editor as IDE Extension - for Technical and Scientific Publications | PDF",1792982369,15]