From 09ac652c640427ecd294a2bf3dc7744ef4ec40d4 Mon Sep 17 00:00:00 2001 From: RodrigoZone <104000827+RodrigoZone@users.noreply.github.com> Date: Tue, 28 Apr 2026 15:07:39 -0300 Subject: [PATCH] feat: add fluxograma-builder plugin Swimlane flowchart builder for Claude Cowork. Creates professional HTML/SVG swimlane diagrams with: - Multi-actor lanes with phase grouping - Strict single-connection-point routing rule - Loop routing via margin channels (no node overlap) - Dynamic edge label widths - SVG clipPath for text containment Author: Rodrigo Moraes (rmoraes3008@gmail.com) --- .../.claude-plugin/plugin.json | 22 + partner-built/fluxograma-builder/.mcp.json | 3 + partner-built/fluxograma-builder/README.md | 49 ++ .../skills/fluxograma-builder/SKILL.md | 202 ++++++++ .../fluxograma-builder/references/template.md | 479 ++++++++++++++++++ 5 files changed, 755 insertions(+) create mode 100644 partner-built/fluxograma-builder/.claude-plugin/plugin.json create mode 100644 partner-built/fluxograma-builder/.mcp.json create mode 100644 partner-built/fluxograma-builder/README.md create mode 100644 partner-built/fluxograma-builder/skills/fluxograma-builder/SKILL.md create mode 100644 partner-built/fluxograma-builder/skills/fluxograma-builder/references/template.md diff --git a/partner-built/fluxograma-builder/.claude-plugin/plugin.json b/partner-built/fluxograma-builder/.claude-plugin/plugin.json new file mode 100644 index 00000000..f0b3e14d --- /dev/null +++ b/partner-built/fluxograma-builder/.claude-plugin/plugin.json @@ -0,0 +1,22 @@ +{ + "name": "fluxograma-builder", + "version": "1.0.0", + "description": "Cria fluxogramas swimlane profissionais em HTML/SVG com raias por ator, fases numeradas, roteamento de setas sem sobreposição e texto sempre dentro dos cartões. Ideal para mapear processos com múltiplos responsáveis como RH, aprovações, onboarding e recrutamento.", + "author": { + "name": "Rodrigo Moraes", + "email": "rmoraes3008@gmail.com" + }, + "keywords": [ + "fluxograma", + "swimlane", + "diagrama", + "processo", + "bpmn", + "flowchart", + "html", + "svg", + "rh", + "workflow" + ], + "license": "Apache-2.0" +} diff --git a/partner-built/fluxograma-builder/.mcp.json b/partner-built/fluxograma-builder/.mcp.json new file mode 100644 index 00000000..da39e4ff --- /dev/null +++ b/partner-built/fluxograma-builder/.mcp.json @@ -0,0 +1,3 @@ +{ + "mcpServers": {} +} diff --git a/partner-built/fluxograma-builder/README.md b/partner-built/fluxograma-builder/README.md new file mode 100644 index 00000000..fdbffbd4 --- /dev/null +++ b/partner-built/fluxograma-builder/README.md @@ -0,0 +1,49 @@ +# Fluxograma Builder + +Plugin para criação de fluxogramas swimlane profissionais em HTML/SVG — sem dependências externas. + +## O que faz + +Gera arquivos HTML auto-contidos com fluxogramas swimlane interativos a partir da descrição de um processo. Ideal para mapear processos com múltiplos responsáveis como RH, aprovações, onboarding e recrutamento. + +## Funcionalidades + +- **Raias por ator** — cada responsável tem sua própria faixa visual +- **Fases numeradas** — agrupamento visual por etapa do processo +- **Tipos de nó** — atividade, decisão 2-vias, decisão 3-vias, início, fim +- **Roteamento sem sobreposição** — regra de ponto único por conexão (cada lado do nó: TOP/BOTTOM/LEFT/RIGHT é usado por no máximo uma seta) +- **Loops via canais de margem** — retornos a etapas anteriores nunca sobrepõem nós +- **Texto clipado** — labels sempre dentro dos cartões, sem transbordo +- **Labels dinâmicas** — caixas de rótulo de seta com largura automática + +## Exemplo de uso + +> "Crie um fluxograma do processo de abertura de vagas. Os atores são Gestor, Sistema, Aprovadores e RH. O Gestor abre a solicitação, o Sistema encaminha para aprovação, os Aprovadores decidem (SIM / NÃO / CANCELAR)..." + +## Instalação + +1. No Cowork, acesse o marketplace de plugins +2. Busque por **fluxograma-builder** +3. Clique em instalar + +## Estrutura + +``` +fluxograma-builder/ +├── .claude-plugin/plugin.json +├── .mcp.json +├── README.md +└── skills/ + └── fluxograma-builder/ + ├── SKILL.md + └── references/ + └── template.md ← código-fonte completo como referência +``` + +## Autor + +Rodrigo Moraes — rmoraes3008@gmail.com + +## Licença + +Apache-2.0 diff --git a/partner-built/fluxograma-builder/skills/fluxograma-builder/SKILL.md b/partner-built/fluxograma-builder/skills/fluxograma-builder/SKILL.md new file mode 100644 index 00000000..349af7d9 --- /dev/null +++ b/partner-built/fluxograma-builder/skills/fluxograma-builder/SKILL.md @@ -0,0 +1,202 @@ +--- +name: fluxograma-builder +description: > + Cria fluxogramas swimlane profissionais em HTML/SVG com raias por ator (swimlanes), + fases numeradas, nós coloridos por tipo e roteamento de setas sem sobreposição. + Use esta skill sempre que o usuário pedir um fluxograma, diagrama de processo, + mapa de fluxo, swimlane, diagrama de atores, BPM visual, ou qualquer representação + gráfica de um processo com múltiplos responsáveis — mesmo que não mencione HTML ou SVG. + Também use ao reconstruir ou corrigir fluxogramas existentes com problemas de sobreposição, + setas mal roteadas, texto transbordando ou pontos de conexão duplicados. +--- + +# Construtor de Fluxogramas Swimlane + +Este skill produz fluxogramas swimlane profissionais como arquivos HTML auto-contidos, +renderizados em SVG puro via JavaScript. Nenhuma biblioteca externa é necessária. + +Antes de começar, leia `references/template.md` — ele contém o código-base completo +com todos os padrões já implementados. Adapte ACTORS, PHASES, NODES e EDGES para o +processo descrito pelo usuário. + +--- + +## 1. Constantes de Layout + +```javascript +const LBL_W = 140; // largura da coluna de fases +const LANE_W = 162; // largura de cada raia de ator +const ROW_H = 92; // altura de cada linha +const NW = 138; // largura dos nós retangulares +const NH = 54; // altura dos nós retangulares +const DH = 32; // meia-altura do diamante +const DW = 46; // meia-largura do diamante +const HDR_H = 65; // altura do cabeçalho +const PAD = 22; // espaço interno superior + +const LMARGIN = 108; // canal esquerdo primário para loops +const LMARGIN2 = 96; // canal esquerdo secundário +const RMARGIN_FN = () => LBL_W + ACTORS.length * LANE_W + 22; +``` + +--- + +## 2. Estrutura de Dados + +### ACTORS — Raias (esquerda para direita) +```javascript +{ id:'nome', label:['LINHA 1','linha 2'], color:'#HEX', bg:'#HEX' } +``` + +### PHASES — Fases do processo +```javascript +{ label:'FASE 1 – Nome', rows:[1,3], border:'#HEX', bg:'#HEX' } +``` + +### NODES — Tipos disponíveis + +| type | Forma | Uso | +|------|-------|-----| +| `start` | Cápsula colorida | Início | +| `rect` | Retângulo com barra lateral | Atividade normal | +| `diamond` | Losango | Decisão 2 saídas | +| `diamond3` | Losango + anel tracejado | Decisão 3 saídas | +| `oval` | Cápsula verde | Fim positivo | +| `oval_end` | Cápsula vermelha | Encerramento | + +Adicione `cancel: true` em nós de alerta/cancelamento → fundo rosado `#FADBD8`. + +--- + +## 3. Regra de Ouro: Ponto Único por Conexão + +**Nenhum nó pode ter 2 setas chegando ou saindo pelo mesmo ponto (top/bottom/left/right).** + +Mapeie antecipadamente: +- **TOP** → entrada do fluxo principal (nó acima) +- **BOTTOM** → saída principal ou decisão direta +- **LEFT** → loop de retorno via margem esquerda ou saída de decisão +- **RIGHT** → loop de retorno via margem direita ou saída de decisão + +### Diamantes com 3 saídas — atribuição obrigatória + +``` + TOP ← entrada + │ + LEFT ◄──◆──► RIGHT + │ + BOTTOM +``` + +Exemplo: NÃO→LEFT, SIM→RIGHT (ou LEFT se destino é mais à esquerda), CANCELAR→BOTTOM. +Nunca coloque duas saídas no mesmo vértice. + +--- + +## 4. Roteamento de Loops + +Loops que voltam a etapas anteriores usam **canais de margem** para não sobrepor nós. + +### Via margem esquerda → chega pelo LEFT do destino +```javascript +case 'nA_nB': { + const b = nb('nA'), t = nb('nB'); + const d = `M ${b.left} ${b.cy} L ${LMARGIN} ${b.cy} L ${LMARGIN} ${t.cy} L ${t.left} ${t.cy}`; + return { d, lx: (b.left + LMARGIN)/2, ly: b.cy - 10 }; +} +``` + +### Via margem direita → chega pelo RIGHT do destino +```javascript +case 'nA_nB': { + const b = nb('nA'), t = nb('nB'); + const d = `M ${b.right} ${b.cy} L ${RMARGIN} ${b.cy} L ${RMARGIN} ${t.cy} L ${t.right} ${t.cy}`; + return { d, lx: (b.right + RMARGIN)/2, ly: b.cy - 10 }; +} +``` + +Se dois loops chegam ao mesmo nó, use `LMARGIN` para um e `LMARGIN2` (96) para o outro. + +**Posicione o rótulo no meio do segmento horizontal** (não no vertical): +```javascript +lx: (b.left + LMARGIN)/2, ly: b.cy - 10 +``` + +--- + +## 5. Labels de Setas — Largura Dinâmica + +Nunca use largura fixa. Labels como "PEDIR AJUSTES" transbordam caixas pequenas: + +```javascript +const lblW = Math.max(34, edge.lbl.length * 5.6 + 14); +// Box sempre centrado em (lblX, lblY) +el('rect', { x:lblX-lblW/2, y:lblY-8, width:lblW, height:15, rx:3, ... }); +``` + +--- + +## 6. Clipping de Texto nos Nós + +Todo texto de nó deve ser clipado com `` para não transbordar o card: + +```javascript +// Em defs — um clipPath por nó: +NODES.forEach(n => { + const cp = el('clipPath', { id:`clip-${n.id}` }, defs); + if (n.type === 'diamond' || n.type === 'diamond3') { + el('rect', { x:cx-DW+6, y:cy-DH+4, width:(DW-6)*2, height:(DH-4)*2 }, cp); + } else { + el('rect', { x:cx-NW/2+8, y:cy-NH/2+2, width:NW-12, height:NH-4 }, cp); + } +}); + +// Ao renderizar texto: +const g = el('g', { 'clip-path':`url(#clip-${n.id})` }, parent); +lines.forEach((l,i) => txt(l, cx, sy+i*lh, opts, g)); +``` + +--- + +## 7. Ordem de Renderização (obrigatória) + +1. `` — marcadores de seta + clipPaths +2. Fundos de fase +3. Fundos e linhas das raias +4. Cabeçalho de atores +5. **Setas** — desenhadas ANTES dos nós (ficam atrás) +6. **Nós** — desenhados por último (ficam na frente) + +--- + +## 8. Padrão de Cores por Semântica + +| Cor | Uso | +|-----|-----| +| `#2E75B6` | Fluxo principal / sistema | +| `#1E8449` | Aprovação / sucesso (SIM) | +| `#E67E22` | Revisão / retorno (NÃO) | +| `#C0392B` | Cancelamento / alerta | +| `#D35400` | Parceiro externo | +| `#117A65` | Onboarding / TI | + +--- + +## 9. Checklist de Qualidade + +- [ ] Nenhum nó com 2 setas no mesmo ponto (TOP/BOTTOM/LEFT/RIGHT) +- [ ] Todos os loops usam canal LMARGIN ou RMARGIN +- [ ] Texto de nó com `clip-path` aplicado +- [ ] Labels de seta com largura dinâmica +- [ ] Setas desenhadas antes dos nós no SVG +- [ ] Diamantes `diamond3` com anel tracejado extra +- [ ] Nós `cancel:true` com fundo rosado +- [ ] SVG auto-dimensionado pelos dados (não fixo) +- [ ] Legenda gerada automaticamente + +--- + +## Referência de Código + +Para o template completo funcional com todos os padrões implementados, leia: +`references/template.md` diff --git a/partner-built/fluxograma-builder/skills/fluxograma-builder/references/template.md b/partner-built/fluxograma-builder/skills/fluxograma-builder/references/template.md new file mode 100644 index 00000000..aa200abd --- /dev/null +++ b/partner-built/fluxograma-builder/skills/fluxograma-builder/references/template.md @@ -0,0 +1,479 @@ +# Template Completo — Fluxograma Swimlane + +Este arquivo contém o código-fonte completo e funcional de um fluxograma swimlane, +já com todos os padrões da skill aplicados. Use como ponto de partida e adapte +ACTORS, PHASES, NODES e EDGES para o processo do usuário. + +```html + + + + + +Fluxograma – [Título do Processo] + + + +
+ +
+
+

Fluxograma – [Nome do Processo]

+

[Responsável] | [Empresa]

+
+
+
[N] Fases  |  Versão 1
+
[N] Atores
+
+
+ + +
+ ⚠️ [Título da nota]: [Texto da nota de alerta.] +
+ +
+ +
+ +
+
+ + + + +```