@likec4/core - npm Package Versions

1.12.1 (2024-10-10)

Improvements

• preview: change grouping in sidebar
• react: change layout spacings from the UI
• react: toolbar to change styles (instead of panel)

Bug Fixes

• vscode: nonce parameter for marking dynamic styles inserted by components (thanks @pavelpykhtin, #1065 (89be0f1)
• react: react component open full-screen mode (thanks @davydkov, 4cd1464), closes #1055
• vscode: space being added/removed before colon (thanks @pavelpykhtin, #1074) (fd3624c)

1.12.0 (2024-10-07)

🚀 Features

• dsl: params to adjust autolayout (thanks @pavelpykhtin, #1053)

  view {
    include *
    autoLayout LeftRight 120 110
  }
  

  Documentation

• dsl: add Azure iconset (thanks @msisolak #1040)

• publish extension to Open VSX (thanks @davydkov, #908)

Bug Fixes

• diagram: unable to drag multiple nodes (thanks @pavelpykhtin, #1043)
• diagram: long node names overflow in node options panel (thanks @pavelpykhtin)
• diagram: deleted control point being reverted on mouse up (thanks @pavelpykhtin, #1044 )
• vscode: extra space in dynamic step (thanks @pavelpykhtin, #1056)
• app: configure kroki url with VITE_KROKI_D2_SVG_URL (thanks @davydkov, #1060)
• deps: upgrade playwright to 1.47.2 (73758c6)
• vscode: --enable-source-maps in node extension (eef8153)

1.11.0 (2024-09-24)

🚀 Features

• Relationship details

  On hover displays direct relationships and resolved from nested. If relationship has navigateTo - displays navigation link

  <img width="681" alt="SCR-20240924-uhpz" src="https://github.com/user-attachments/assets/de90231d-2eaa-4b20-b508-f3f72e420d24">

  To disable - set showRelationshipDetails={false} in react component

• Improved layout editing

  Thanks to @pavelpykhtin, now it is possible add control points with right click, or reset all control points
  Example here #1013

• New API LikeC4Model.Layouted

  Difference between LikeC4Model.Computed and LikeC4Model.Layouted - is that second one also includes layout data (dimensions, positions), that is needed for rendering

  import { LikeC4 } from 'likec4'
  
  const likec4 = await LikeC4.fromWorkspace()
  
  // Sync and fast
  const model = likec4.computedModel()
  model
    .element('cloud.backend.api')
    .incoming() // relationships incoming to the element
    .filter(r => r.tags.includes('http')) // filter by tags
    .map(r => r.source) // get source elements
  
  // Async, includes layout data (dimensions, positions...)
  const diagram = await likec4.layoutedModel().view('index')
  

  Generated React component also exports instance of LikeC4Model.Layouted, and hooks to use inside your app.

1.10.1 (2024-09-17)

Bug Fixes

• dsl: derived connection from multiple relationships with same endpoints always picks the last relationship (12b1899), closes #990
• vscode: preview does not work in remote workspaces (90e4725), closes #1004
• react: edge changes being reverted on mouse up (thanks @pavelpykhtin, #1008)
• vscode: space being inserted into relation's source (thanks @pavelpykhtin, #1001)

1.10.0 (2024-09-12)

🚀 Features

• Parallel steps and notes in dynamic views

  <img width="661" alt="image" src="https://github.com/user-attachments/assets/8454d296-6ffe-4ea2-a9d8-0d72aff70105"> [Playground example](https://playground.likec4.dev/w/dynamic/)

• Navigation for relationships (zoom-in to dynamic views)

  model {
    webApp -> backend.api {
      title 'requests data for the dashboard'
      navigateTo dashboardRequestFlow
    }  
  }
  

  Documentation

• Code Formatter in VSCode Extension (thanks @pavelpykhtin, to #979)

• New component ReactLikeC4 Low-level component with more control and event listeners.

  const App = () => {
    return (
      <div>
        <ReactLikeC4
          viewId="index"
          pannable={false}
          zoomable
          keepAspectRatio={false}
          showElementLinks={false}
          showDiagramTitle={false}
          onNodeClick={...}
        />
      </div>
    )
  }
  

  Documentation

Bug Fixes

• relative links are translated into undeployable file:// (@davydkov #982) (7b0ea80), closes #978

1.9.0 (2024-09-07)

🚀 Features

• LikeC4 Model API Access and traverse your architecture model programmatically using the LikeC4 Model API.

  import { LikeC4 } from "likec4"
  
  const likec4 = await LikeC4.fromWorkspace(`....`)
  
  // Validation errors
  console.log(likec4.getErrors())
  
  // Traverse the model
  const model = likec4.model()
  model
    .element('cloud.backend.api')
    .incoming() // relationships incoming to the element
    .filter(r => r.tags.includes('http')) // filter by tags
    .map(r => r.source) // get source elements
  
  // Layouted views
  const diagrams = await likec4.diagrams()
  

  Documentation

• Custom colors

  specification {
    color custom #6BD731
  
    element customer {
      notation "Person, Customer"
      style {
        shape person
        color custom
      }
    }
  }
  

  Thanks to @pavelpykhtin, resolves #916

Bug Fixes

• vite-plugin: fail-safe virtual:likec4/overview-graph (ed85e5f), closes #959

1.8.1 (2024-08-30)

Bug Fixes

• dsl: warn message about ambiguous alternatives

Improvements

• dsl: allow this and it as target

  model {
    frontend = component  {
      customer -> it 'opens in browser'
    }
  }
  

1.8.0 (2024-08-27)

🚀 Features

• View notations

  specification {
  
    element customer {
      notation "Person, Customer"
      style {
        shape person
        color green
      }
    }
  
    element staff {
      notation "Person, Staff"
      style {
        shape person
      }
    }
  }
  

  Documentation

  <img width="436" alt="SCR-20240827-nhav" src="https://github.com/user-attachments/assets/bcc151e2-6c31-4b72-8651-a39ba79351d0">

• technology for relationships (Thanks to @pavelpykhtin, resolves #576)

• title for links (Thanks to @pavelpykhtin, resolves #871)

• metadata in DSL (Thanks to @pavelpykhtin)

• [experimental] overview all views with use-overview flag in cli

1.7.4 (2024-08-17)

Bug Fixes

• broken export to png
• add downloadedRef to track if download has already occurred
• compact diagram title panel and zoom out on double click

1.7.3 (2024-08-16)

Improvements

• dsl: hiding relationship titles in views (closes #910)

• react: where filter on react components (closes #872, documentation)

  // Display elements and relationships where:
  // - tag is not 'legacy'
  // - and
  // - tag is 'v1' or 'v2'
  <LikeC4View
    viewId="index"
    where={{
      and: [
        { tag: { neq: 'legacy' } },
        {
          or: [
            { tag: { eq: 'v1' } },
            { tag: { eq: 'v2' } }
          ]
        }
      ]
    }}/>
  

• react: export to png in new tab (198d79e)

• cli: export png to flat directory (bcd23dd)

• cli: warn layout drifts (49c1100)