feat: add fluxograma-builder plugin (swimlane flowchart builder)

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"
+}

partner-built/fluxograma-builder/.mcp.json

@@ -0,0 +1,3 @@
+{
+  "mcpServers": {}
+}

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

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 `<clipPath>` 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. `<defs>` — 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`